Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Macromedia Dreamweaver 8 es un editor HTML profesional para disear, codificar y desarrollar sitios, pginas y aplicaciones Web. Tanto si desea controlar manualmente el cdigo HTML como si prefiere trabajar en un entorno de edicin visual, Dreamweaver le proporciona tiles herramientas que mejorarn su experiencia de creacin Web. Ingresando a Macromedia Dreamweaver 8 1. Inicio 2. Todos los programas 3. Macromedia 4. Macromedia Dreamweaver 8

Novedades de Dreamweaver 8 Conociendo el espacio de trabajo En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana, En el espacio de trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de la aplicacin de mayor tamao. Nos dirigimos a la columna Crear nuevo y escogemos HTML

Pg. 1

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Entorno de Trabajo y Codificacin Potente.

Pgina de Inicio.- nos permite abrir un documento reciente o crear un documento nuevo. Desde la pgina de inicio tambin puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada a un tutorial del producto. Barra Insertar Grupo de Paneles

Barra de Herramientas del Documento Sector de Etiquetas Inspector de Propiedades

Pg. 2

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

La barra Insertar.- Contiene botones para la insercin de diversos tipos objetos, como imgenes , tablas y capas, en un documento

La barra de Herramientas de documento.- contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento.

La barra de Herramientas Estndar.- Contiene botones para las operaciones mas habituales de los mens archivos y Edicin; Nuevo, Abrir, Guardar, Guardar Todo, Cortar, Copiar, Pegar, Deshacer, y Rehacer

La ventana de documento.- Muestra el documento actual mientras creando y editando Inspector de propiedades.- Le permite ver y cambiar diversas propiedades del objeto o texto seleccionado

El Selector de Etiquetas.- aparece en la barra de estado en la parte inferior de la ventana del documento, muestra la jerarqua de etiquetas que rodean a la seleccin actual.

Los Grupos de Paneles.- Son un conjunto de Paneles relacionados apilados bajo un encabezado comn. Para Ampliar un grupo de paneles, haga clic en la flecha de ampliacin situada a la izquierda del nombre del grupo.

Panel de Archivos.- Permite gestionar los archivos y las carpetas, tanto si forman parte de un sitio Dreamweaver como si se encuentran en un servidor remoto.

Pg. 3

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Cambiar la vista en la ventana del documento Puede ver un documento en la ventana de documento con la vista Cdigo, con la Vista Diseo o con ambas

Pg. 4

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Trabajando con Imgenes

Todas las pginas acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia o dotarla de una mayor informacin visual. Para insertar una imagen hay que seguir los siguientes pasos. 1. Dar clic en el Men Insertar 2. Imagen 3. Escojo un imagen

Imgenes de Sustitucin Para insertar una imagen de sustitucin hay que seguir los siguientes pasos: Men Insertar >> Objeto de Imagen >> Imagen de sustitucin

El Objetivo de la Imagen de Sustitucin es que se colocan dos imgenes que cambian al momento de colocar el puntero del Mouse sobre el grafico.

Pg. 5

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Tablas
En este tema vamos a ver como trabajar con tablas, podremos entre otras cosas, insertar tablas, combinar celdas, insertar filas y comulgas y cambiar el tamao de borde. Insertar Tabla. Nos dirigimos al Men Insertar y escogemos tablas y luego llenamos los datos segn lo necesitado. Tal como se muestra en el grafico

Ejemplo de Tablas 3 Filas y 3 Columnas 5 Filas y 6 Col 4 Filas 8 Columnas

Pg. 6

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Prctica 1

Guardar esta pgina con el nombre de Index. Verificar el la pagina cada uno de los ingresos que se han realizado

Pg. 7

Imagen de Fono se encuentra en las Centro Americano Integral de Idiomas y Computacin CAINICOMPUT propiedades de la Pgina

Desarrollo detallado de la Prctica

Tipo de letra: Arial Tamao:24 Color: Azul Negrita

Tipo de letra: Arial Tamao:34 Color: Rojo Negrita

Insertar imagen con el ancho: 580 Altura:5

Fuente: Arial Tamao:12 Color: Negro

Insertar imagen de Sustitucin Altura:106 Ancho:113

Vietas, se encuentran en las propiedades de la Pgina

Insertar Imagen Altura: 120 Ancho:5

Pg. 8

Centro Americano Integral de Idiomas y Computacin Tabla de Columnas: 2 Filas:3

CAINICOMPUT

Imagen de Sustitucin

Grafico de altura: 5 ancho:500

Tabla Principal Columnas 3 Filas: 1

Tabla Interna Columnas: 1 Filas:8

Grfico de Altura: 5 Ancho: 350

Tabla Interna Columnas: 2 Filas: 6

Pg. 9

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

CLASE 2
BOTONES FLASH
El Botn flash es un botn actualizable basado en una plantilla flash en la que en mucho de los botones tambin podemos aadir textos, color de fondo, y vnculos con otros archivos y pginas. Para Seleccionar el Botn Flash siga los siguientes pasos. 1. Dar clic en el men Insertar 2. Media 3. Botn Flash

Estilo.- Selecciona el Estilo de botn que desea en la lista Texto del botn.- El texto que escriba reemplazar al Button Text. Fuente.- Selecciona la fuente del texto. Tamao.- Selecciona el tamao del texto que ira en el botn Vnculo. En este campo vamos a introducir el vnculo absoluto o relativo al botn
Destino.- Se especifica la ubicacin en que se abrir el archivo

Pg. 10

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Insertar un texto Flash

El objeto texto flash permite crear e insertar una pelcula flash que solo contiene texto, esto permite crear una pequea pelcula de grficos con fuentes de diseo y el texto que usted desee. Para insertar un texto flash siga los pasos 1. Men Insertar 2. Media 3. Texto Flash

Fuente.- Selecciona el tipo de fuente que colocaremos en el texto flash Tamao.- Sirve para cambiar el tamao Atributos de estilo.- el objetivo es cambiar los estilos, Negrita, Cursiva y las alineaciones Color de sustitucin.- Establece el color de sustitucin donde que aparece cuando el puntero pasa sobre el objeto del texto flash Texto.- En este botn se introduce el texto deseado. Vnculo.- se utiliza para asociar un vnculo con el objeto de texto flash, o con un botn flash. Destino.- Se introduce o especifica el marco o la ventana de destino en la que se desea que cargue el vnculo. Color de Fondo.- se elije el color de fondo para el texto.

Pg. 11

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Capas
Una capa es un elemento de pgina HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posicin absoluta asignada. Las capas pueden contener texto, imgenes u otros contenidos que se pueden situar en el cuerpo de un documento HTML Para poder ingresar capas tenemos que seguir los siguientes pasos 1. Ventana 2. Capas

O tambin pulsando la tecla F2

Botn Dibujar Capas

Pg. 12

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Prctica 2

Tabla completa hecha de 5 columnas y 3 filas Imagen de Sustitucin Texto en marquesina Texto Flash Tabla insertada con borde 0 de 1 Columnas y 5 Filas adems cada celda tiene relleno Seis Capas y en cada una de ellas se inserta una imagen

Pg. 13

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Clase 3
Marcos
Los marcos son frames que sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras si pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina contiene un documento HTML individual, Por ejemplo en la imagen derecha

Creando las marcos

Existen varias formas de crear un marco. Men Modificar >> Conjunto de Marcos

Otra manera de escoger marcos es dirigindose al Men Archivo >> Nuevo >> Escogemos la categora Conjunto de Marcos y seleccionamos el marco deseado como se muestra en la imagen

Pg. 14

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Lneas de tiempo
HTML dinmico se refiere ala capacidad de cambiar el estilo o propiedades de posicionamiento por medio de un lenguaje de script. Las lneas de tiempo utilizan HTML dinmico para cambiar las propiedades de una capa o una imagen en una serie de cuadros a travs del tiempo. Las lneas de tiempo crean animacin cambiando la posicin, tamao, visibilidad y orden de una capa en el tiempo. Las lneas de tiempo tambin son tiles para otras acciones que podemos querer que ocurran luego de que una pgina se carga. Por ejemplo, una lnea de tiempo puede cambiar una imagen o pueden ejecutar un comportamiento aun determinado tiempo. Las funciones de capa de las lneas de tiempo funcionan solo en navegadores de generacin 4 0 superiores. Para ver el cdigo Javascript generado por una lnea de tiempo, es necesario abrir el HTML inspector. El cdigo correspondiente estar en la funcin MM_initTimelines dentro de una etiqueta sCRIPT en el HEAD del documento.

El inspector de lnea de tiempo representa las propiedades de capas e imgenes a travs del tiempo. Para abrirlo debemos ir a Ventana/lnea de tiempo (Window/Timelines). La ventana que se abre contiene un cabezal de reproduccin y est dividido en cuadros como una pelcula. Tambin posee canales en donde pueden ponerse distintos materiales.

Pg. 15

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Los puntos blancos son keyframes, la barra azul demuestra movimiento

Para animar una capa, una vez creada, abrimos el inspector de lnea de tiempo. Tomamos la capa y la arrastramos hasta el primer canal de la lnea de tiempo (justo debajo del cabezal). Se habr agregado una lnea violeta con un punto redondo al comienzo y otro al final. Estos puntos indican lugares donde pueden pasar cosas. Se llaman keyframes o cuadros clave y nos pueden servir, por ejemplo, para animar un layer. Hacemos clic en el keyframe del final, luego tomamos el layer en la ventana de documento y lo desplazamos a otro lugar. Lo que habremos creado es un desplazamiento de la capa desde la posicin original hasta el lugar donde lo pusimos finalmente Men emergente Lnea de tiempo .- Especifica qu lneas de tiempo del documento se estn mostrando actualmente en el panel Lneas de tiempo. Cabezal de reproduccin .- Muestra qu fotograma de la lnea de tiempo se est mostrando actualmente en la ventana de documento. Nmeros de fotograma.- Indica la numeracin secuencial de los fotogramas. El nmero que aparece entre los botones Atrs y Reproducir corresponde al fotograma actual. La duracin de la animacin se controla estableciendo el nmero total de fotogramas y el nmero de fotogramas por segundo (fps). El valor predeterminado de 15 fotogramas por segundo es una buena velocidad media para la mayora de los navegadores que se ejecutan en sistemas normales Windows o Macintosh. Nota: las velocidades ms altas no mejoran necesariamente los resultados. Los navegadores siempre reproducen todos los fotogramas de la animacin, incluso aunque en el sistema del

Pg. 16

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

usuario no puedan alcanzar la velocidad especificada. La velocidad de fotogramas se omite si es superior a la que puede admitir el navegador. Men contextual.- Contiene varios comandos relacionados con la lnea de tiempo.

Canal Comportamientos.- Es el canal de los comportamientos que deben ejecutarse en un fotograma determinado de la lnea de tiempo. Barras de animacin Muestran la duracin de la animacin de cada objeto. Una sola fila puede incluir mltiples barras en representacin de otros tantos objetos. Barras diferentes no pueden controlar un mismo objeto en el mismo fotograma. Fotogramas clave Son fotogramas de una barra en los que se han especificado propiedades del objeto (como posicin, por ejemplo). Dreamweaver calcula valores intermedios para fotogramas en fotogramas clave. Los fotogramas clave se sealan mediante pequeos crculos. Canales de animacin Muestran barras para animar capas e imgenes.

Por ltimo tildarnos el casillero autoplay de la ventana de lnea de tiempo. Cuando veamos la pgina en nuestro navegador, la capa se animar y har el recorrido prefijado. Si queremos que repita dicho recorrido en forma indefinida, tildarnos la casilla Loop de la ventana lnea de tiempo Rebobinar Desplaza el cabezal de reproduccin hasta el primer fotograma de la lnea de tiempo. Atrs Desplaza el cabezal de reproduccin un fotograma hacia la izquierda. Haga clic en el botn Atrs y mantngalo presionado para reproducir la lnea de tiempo hacia atrs. Reproducir Desplaza el cabezal de reproduccin un fotograma hacia la derecha. Haga clic en el botn Reproducir y mantngalo presionado para reproducir la lnea de tiempo hacia delante. Reprod. auto. Inicia automticamente la reproduccin de una lnea de tiempo cuando la pgina actual se carga en un navegador. Reprod. auto. adjunta un comportamiento a la seccin body de la pgina que ejecuta la accin Reproducir lnea de tiempo cuando se carga la pgina. Bucle Hace que la lnea de tiempo actual se reproduzca en bucle indefinidamente mientras la pgina est abierta en un navegador. Bucle inserta el comportamiento Ir a
Pg. 17

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

fotograma en lnea de tiempo en el canal Comportamientos despus del ltimo fotograma de la animacin. Haga doble clic en el marcador del comportamiento en el canal Comportamientos para editar los parmetros de dicho comportamiento y cambiar el nmero de repeticiones en bucle.

Vnculos
Hay varias formas de poner un vnculo en Dreamweaver. Podemos hacerlo desde la barra insertar (en modo Comn) seleccionando el icono en forma de cadena, se abre una ventana de dilogo con varias casillas, en texto ponemos la palabra que queremos enlazar, en vnculo pondremos la direccin html donde queremos ir y en destino podemos del navegador. elegir entre: _blank, _parent,_self y _ top. Por ahora solo utilizaremos _blank si queremos que nuestro enlace se abra en una ventana nueva

Otra forma es hacerlo desde el inspector de propiedades. Hay que seleccionar el texto a enlazar y en la casilla de vnculo introducimos la direccin del enlace. Si no sabemos la direccin correcta pinchamos sobre el icono de la carpeta y la seleccionamos de nuestro sitio web o pinchamos sobre el icono en forma de rueda y arrastramos para elegir la direccin en el panel archivos.

Si es un enlace externo hay que poner toda la direccin web completa, si es un enlace a nuestro sitio web solo ponemos los elementos de la direccin no comunes del enlace.

Pg. 18

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Podemos definir el color y formato de los vnculos desde la ventana de propiedades de la pgina. Iremos a vnculos donde podemos definir cuatro colores diferentes, uno para cada estado del enlace, tambin podemos definir la fuente, el tamao y el estilo del subrayado del enlace. Tambin podemos utilizar imgenes para crear vnculos, en este caso seleccionamos la imagen y en la casilla de vnculo del inspector de propiedades escribimos la direccin del enlace.

Pg. 19

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Prctica 3-4

Desarrollo de la Prctica
Para empezar a desarrollar esta prctica tenemos que crear un marco que de esta forma

Pg. 20

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Fondo de Pantalla de Teleamazonas Men Insertar >> Fecha El texto Noticias va con el tipo de letra: Arias Tamao: 14 Color: #FF9900 El texto Noticias va con el tipo de letra: Arias Tamao: 14 Color: #FF9900 y texto flash Realizar una tabla de 3 Filas y una Columna con grosor de borde 0 y agregamos en cada celda un nombre El texto 24 Horas, De 9 a 10, En corto va con Estilo2 Tamao:12 Color Azul y realizar los vnculos para cada una de las pginas que se va a enlazar El mismo formato se aplica para las otras opciones en la parte inferior

Este nuevo Pgina se lo tiene que hacer tanto para 24 Horas, De 9 a 10, En corto, Deporte Total, Frmula1, Ms Ftbol, y cada una de ellas enlazadas para las palabras como se muestran en el documento El texto 24 horas es hecho con capa y con un formato Estilo2 Tamao:36 color: #FF9900 con un capa y animado con lnea de tiempo El texto de Lunes a viernes esta hecho con capas con un color: #0000FF La imagen se la coloca desde Insertar >> Imgen Este texto esta hecho en capas con el Estilo4 tamao: 12 y color: #0000FF

Pg. 21

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Clase 4
Formularios
Vamos a ver que es un formulario, para que se utiliza, como insertar uno, que elementos puede contener y como pueden validarse los datos introducidos a l. Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crea una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

Elementos de formulario
Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Objetos de formulario. A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la pgina. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as como algunas de sus propiedades.

Campo de texto y rea de texto: Permiten aadir un cuadro de texto. El Campo

de texto solo permite escribir una lnea al usuario, mientras que el rea de texto permite escribir varias. Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades. Tambin es posible definirlo como Contrasea. A continuacin tienes un ejemplo de cada uno de estos tres tipos.

A travs del inspector de propiedades es posible asignar tambin el ancho del cuadro de texto, el nmero mximo de lneas o caracteres, y el valor inicial del cuadro.

Pg. 22

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Botn: Es el botn tradicional. El botn puede tener asignadas tres opciones: Enviar
formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

Tambin es posible cambiar el texto del botn, a travs del campo Etiqueta del inspector de propiedades.

Casilla de verificacin: Es un cuadrito que se puede activar o desactivar. Puede

asignrsele el estado inicial como Activado o como Desactivado.

Botn de opcin: Es un pequeo botn redondo que puede activarse o desactivarse.

Si hay varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems.

Lista/Men: Una lista o men es un elemento de formulario que lleva asociada una lista de opciones. Los elementos se aaden a travs de botn Valores de lista del inspector de propiedades. Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una lista, a travs de Selecciones puede permitirse que se seleccionen varios simultneamente.

Pg. 23

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qu datos ha de introducir en cada uno de ellos.

Crear formularios Puedes crear formularios a travs del men Insertar, opcin Formulario. Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneas rojas discontinuas, similar al de la imagen de siguiente.

Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabes puedes insertarlos a travs del men Insertar, opcin Objetos de formulario. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su apariencia.

Pg. 24

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Practica 5

Pg. 25

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Clase 6
Marquesinas en DreamWeaver
Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden desplazarse de un lado a otro de la ventana en forma de lnea. Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es necesario hacerlo a travs del cdigo. Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina. Tambin es posible especificar algunas caractersticas de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina har el desplazamiento una sola vez y se detendr. Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazar de lado a lado de la ventana, como si rebotara en los extremos, cuyo cdigo puedes ver a continuacin: <marquee behavior="alternate"> Texto </marquee>

Pg. 26

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Crear un lbum de fotos con DreamWeaver

En esta clase usted aprender a Crear un Album de Fotos Web, para tal efecto, en primera instancia usted necesitar tener una carpeta que contenga las imgenes que sern aadidas al lbum. Para iniciar el Asistente que le guiar en la creacin de su Album de Fotos Web, deber escoger la opcin Comandos del men principal del programa, inmediatamente seleccione la opcin Crear lbum de fotos web del men emergente.

Al escoger esta pantalla llenaremos los campos

Pg. 27

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

La accin anterior le dirigir al cuadro de dialogo Crear lbum de fotos web, ac observar ciertos campos que deber rellenar. La mayora de las respuestas a los campos en el cuadro de dialogo Crear lbum de Fotos son intuitivas, sin embargo, se explicarn algunos campos que podrn no ser muy intuitivos para el usuario. A continuacin se explicarn algunos de stos campos. Carpeta de imgenes de origen: Este campo se refiere a la ubicacin de las imgenes que se desean colocar en el Album, esta carpeta puede estar fuera del Sitio.

Carpeta de destino: Este campo se refiere a la ubicacin de la carpeta donde se colocarn las imgenes seleccionadas anteriormente (imgenes de origen), esta carpeta debe ser creada dentro del Sitio

Tamao miniatura: Este apartado se refiere al tamao de las imgenes miniatura o thumbnails, stas servirn de vista previa a los visitantes, las opciones que presenta este apartado son: 36 x 36 pxeles 72 x 72 pxeles 100 x 100 pxeles 144 x 144 pxeles 200 x 200 pxeles

Formato de miniatura: Este apartado se refiere a la extensin que utilizarn las imgenes miniaturas o thumbnails, sta extensin implica una calidad en las imgenes y el nmero de colores en las mismas.

Formato de Foto: Implica las mismas consideraciones que el apartado anterior, pero esta vez est aplicada a las imgenes tamao real.

Pg. 28

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Al finalizar el rellenado de los campos, deber dar click en la opcin Aceptar. Esta accin har un llamado a Macromedia Fireworks 8 y comenzar el Progreso de la operacin por lotes, es decir, Macromedia Fireworks comenzar a procesar todas las imgenes que se encuentran en la Carpeta de imgenes de origen. Luego que Macromedia Fireworks termine el Progreso de operacin por lotes, se le indicar en Macromedia Dreamweaver que el Album de Fotos Web se ha creado con exito!

Prctica 6
Para esta prctica se le pedir al estudiante traer fotos para poder crear el album de fotos

Pg. 29

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Repaso General 1

Pg. 30

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Desarrollo del Repaso General 1

1. Crear un marco como se muestra en el grafico

2. Guardar las ventas con el nombre que ustedes desean y al ventana principal colocar el nombre de index 3. Vamos a trabajar en la parte superior

A.- La imagen que se encuentra aqu esta dentro de una capa B.- El texto Centro Americano Integral de Idiomas y Computacin es un Texto Flash C.- Esta palabra esta realizada dentro de una capa y se le ha realizado un efecto con la lnea de tiempo (el efecto puede ser a su gusto) D.- Esta imagen esta dentro de una capa E.- Botones Flash que estn enlazadas a cada una de las pginas para poder ver los detalles de cada una de ellas. 4. Vamos a trabajar en la parte izquierda de la ventana En esta parte de la ventana hemos hecho una tabla de Filas:11 Columnas: 1 y con bordes 0 con la finalidad de que no se noten los bordes Cada una de las celdas dentro de la tabla tiene un color de fondo diferente que va de acuerdo a los gustos del estudiante

Pg. 31

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Se hacen los vnculos con cada una de las pginas dentro del Mainframe para que las pginas que aparezcan lo hagan dentro de la misma pagina donde se est trabajando 5. Vamos a trabajar en la parte central del Frame En esta parte estamos colocando el solamente un fondo para el frame que es el logo de Cainicomput el cual se lo facilitara su profesor al igual que el resto de las imgenes para esta prctica.

Repaso General 2

Pg. 32

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Repaso General 3

Pg. 33

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

TRABAJANDO CON DREAMWEAVER Y ASP Para trabajar con pginas ASP necesitar un servidor Web en funcionamiento para lo cual le ayudaremos a la instalacin del Servidor Web Microsoft en su equipo local. Instalacin IIS(Internet Information Server) en Windows XP Profesional o SP2 Antes de Instalar IIS verifique si lo tiene instalado en su PC Ingrese al explorador de Windows y compruebe si se encuentra la carpeta Inetpub de esta manera c:\Inetpub o D:\Inetpub. Esta carpeta se crea durante su instalacin, como se muestra en el siguiente grafico.

Si no existe esta carpeta lleve a cabo los siguientes pasos: Inserte el CD de Windows XP Profesional o SP2, luego se mostrar automticamente la siguiente pantalla

Pg. 34

Centro Americano Integral de Idiomas y Computacin -

CAINICOMPUT a

Luego selecciones Instalar componentes adicionales de Windows, continuacin se mostrar la siguiente ventana

Seleccione Servicio de Internet Information Server (IIS), luego presione el botn siguiente se mostrar la siguiente ventana.

Pg. 35

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Luego de Finalizar la instalacin se mostrar la siguiente ventana, donde indicar que la instalacin ha finalizado.

Presione el botn finalizar de la ventana del asistente para componente de Windows.

Pg. 36

Centro Americano Integral de Idiomas y Computacin -

CAINICOMPUT

Para confirmar se la instalacin finaliz correctamente, ingrese al Internet Explorer luego escriba la direccin http://localhost/localstart.asp, si la instalacin tuvo xito se debe mostrar la siguiente pgina.

Nota: no es necesario que tengan internet para que este servicio (IIS) funcione correctamente.

Pg. 37

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Creando una base de datos en Access

Antes de empezar a trabajar con Dreamweaver 8, necesitamos crear una base de datos. Para que este ejemplo sea prctico creamos la base de datos en Microsoft Access. Abrimos Microsoft Access, al terminar de cargar el programa, se muestra la siguiente ventana,

dar clic en el botn de office y escoger nuevo, y en la parte inferior le escribimos el nombre de la base de datos y dar clic en el botn crear

Pg. 38

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Al momento de guardar la base de datos debemos de hacerlo dentro de la carpeta Inetpub\wwwroot.

Una vez creada la base de datos, empezamos creando una tabla, como se muestra en la figura

Y agregamos los siguientes campos.

Pg. 39

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Luego Procedemos a guardar la tabla con el nombre de Personal

Nota: Llenar los registros con al menos unas diez personas

Pg. 40

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Creando la Conexin (ODBC)

Para mostrar el controlador ODBC (Conectividad de base de datos abierta) en Windows XP elija Inicio >> Panel de Control >> Rendimiento y Mantenimiento >> Herramientas Administrativas >> Origen de Datos (ODBC) Y a continuacin de clic en la ficha controladores.

Pantalla de la ficha Controladores Si no ha instalado el controlador necesario descargue e instale los paquetes de Microsoft Access dbase driver.

Pg. 41

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Luego haga clic en la ficha DNS del sistema, la ficha mostrar la lista de los DNS del sistema

Haga clic en agregar para aadir un nuevo DNS a la lista. Aparecer un cuadro de dilogo Crear un nuevo origen de datos con todos los controladores cargados del sistema. Seleccione Driver to Microsoft Access (*.mdb) y luego haga clic en finalizar

Pg. 42

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Luego aparecer una pantalla y asigne un N ombre del origen de datos, en este caso colocamos el nombre de la base de datos (Database), en la Descripcin colocamos una descripcin de la base de datos., luego presionamos el botn Seleccionar.

Luego se mostrar la siguiente ventana Seleccionar, seleccionamos la base de datos DataBase y presionamos Aceptar a todas las ventanas ODBC

Pg. 43

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Definir un Sitio Dreamweaver

Antes de empezar a trabajar con Pginas ASP con Dreamweaver 8, es necesario crear un sitio para poder hacer conexiones con Base de Datos e interacciones con paginas ASP. Para definir un sitio Dreamweaver haremos lo siguiente. Abrimos el Explorador de Windows Creamos un directorio llamado Intranet dentro de la carpeta wwwroot: o C:\Inetpub\wwwroot\intranet\imagenes Es Recomendable haber creado estos directorios para colocar las pginas ASP, para este ejemplo hemos colocado estos nombres a los directorios, si desean pueden colocar otro nombre. Si teienes pginas o archivos de imgenes pueden copiar sus archivos a este directorio y probar su correcto funcionamiento o tambin para empezar a trabajar con aplicaciones ASP.

Pg. 44

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Definir una carpeta local

Para definir la carpeta local de Dreamweaver haremos lo siguiente. En la barra de Men de Dreamweaver , seleccione Sitio > Administrador de Sitios y haga clic en el botn nuevo > Sitio

En la ventana definicin del Sitio seleccione la ficha avanzada

En la Seccin Categora selecciones Datos locales

Pg. 45

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

En Nombre del Sitio colocamos Intranet, este nombre es solo de referencia podemos colocar cualquier otro nombre si usted desea.

En la Carpeta raz local colocamos la siguiente direccin : C:\inetpub\wwwroor\intranet\imagenes\ o hacemos clic en el icono amarillo en forma de directorio para seleccionar el directorio que hemos creado.

En Actualizar lista de archivos locales auto, marcamos un Check

En la Carpeta predeterminada de Imgenes colocamos la siguiente direccin: C:\Inetpub\wwwroot\intranet\imagenes\ o hacemos clic en el icono amarillo en forma de directorio para seleccionar el directorio que hemos creado

Luego seleccionamos en Categora Servidor de Prueba

Pg. 46

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

En Modelo de Servidor seleccionamos ASP VBScript

En Acceso colocamos Local/RED

En la carpeta de Servidor colocamos la siguiente direccin c:\Inetpub\wwwroot\ o hacemos clic en el icono amarillo en forma de directorio para seleccionar el directorio que hemos creado y luego damos un clic

En actualizar lista de archivos locales automticamente marcamos con un check.

En el Prefijo URL colocamos la siguiente direccin http://localhost/ luego presionamos el botn Aceptar para finalizar

Pg. 47

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

Para ver el sitio que hemos creado seleccionamos Ventana>> Archivos, de la barra de Men de Dreamweaver, en la ventana archivo seleccionamos la ficha Sitio

Luego se mostrara el directorio intranet con el directorio imgenes , si no se ha guardado los archivos los directorios se mostrarn vacios, en caso contrario se mostrar todos los archivos colocados en la carpeta.

Creando un Juego de Registros.

Para crear un juego de registros haremos lo siguiente

Primero creamos una nueva pagina en Archivo>> Nuevo. En la ventana Nuevo Documento seleccionamos la ficha General, en Categora seleccionamos Pgina Dinmica y seleccionamos ASP VBScript y presionamos el botn crear

Pg. 48

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

A continuacin, crear un juego de registros para mostrar los datos almacenados en una base de datos. Un juego de registros es un subconjunto de datos extrados de una base de datos mediante una consulta de base de datos Elija Ventana >> Vinculaciones>> para abrir el panel de Vinculaciones y luego haga clic en el botn o signo (+) y seleccione el juego de registros (Consulta). Aparecer el cuadro de dialogo Juego de Registros.

Pg. 49

Centro Americano Integral de Idiomas y Computacin

CAINICOMPUT

En el cuadro de texto nombre, deje el nombre Recordset1. Este es el nombre del juego de registros que est definiendo. Puede ser cualquier otro pero para este ejemplo dejaremos el que se muestra por defecto. En el Men emergente Conexin, se muestra las dos conexiones que realizamos en los temas anteriores Datos y para este ejemplo Seleccionaremos Datos En el cuadro de Dialogo Juego de Registros, se actualizar y mostrar informacin para la primera tabla de la base de datos DataBase

Nota: Si no aparece la Conexin Datos en el men haga clic en el bot Definir para crearla.

En el Men Emergente Tabla Seleccione Personal, el juego de registro se actualizar con los registros de la tabla Personal. En columnas acepte el valor predeterminado, Todo

Pg. 50