Post on 15-Feb-2015
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Macromedia Dreamweaver 8 es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de creación Web.
Ingresando a Macromedia Dreamweaver 8
1. Inicio2. Todos los programas 3. Macromedia4. Macromedia Dreamweaver 8
Novedades de Dreamweaver 8
Conociendo el espacio de trabajo
En Windows, Dreamweaver proporciona un diseño integrado en una única ventana, En el espacio de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño.
Nos dirigimos a la columna Crear nuevo y escogemos HTML
Pág. 1
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Entorno de Trabajo y Codificación Potente.
Página de Inicio.- nos permite abrir un documento reciente o crear un documento nuevo. Desde la página de inicio también puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada a un tutorial del producto.
La barra Insertar.- Contiene botones para la inserción de diversos tipos “objetos”, como imágenes , 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 Estándar.- Contiene botones para las operaciones mas habituales de los menús archivos y Edición; Nuevo, Abrir, Guardar, Guardar Todo, Cortar, Copiar, Pegar, Deshacer, y Rehacer
Pág. 2
Grupo de PanelesBarra Insertar
Barr
a de
Her
ram
ient
as d
el
Doc
umen
to
Sector de Etiquetas
Inspector de Propiedades
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
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 jerarquía de etiquetas que rodean a la selección actual.
Los Grupos de Paneles.- Son un conjunto de Paneles relacionados apilados bajo un encabezado común. Para Ampliar un grupo de paneles, haga clic en la flecha de ampliación 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.
Cambiar la vista en la ventana del documento
Puede ver un documento en la ventana de documento con la vista Código, con la Vista Diseño o con ambas
Pág. 3
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Trabajando con Imágenes
Todas las páginas acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia o dotarla de una mayor información visual.
Para insertar una imagen hay que seguir los siguientes pasos.
1. Dar clic en el Menú Insertar
2. Imagen
3. Escojo un imagen
Imágenes de Sustitución
Para insertar una imagen de sustitución hay que seguir los siguientes pasos:
Menú Insertar >> Objeto de Imagen >> Imagen de sustitución
El Objetivo de la Imagen de Sustitución es que se colocan dos imágenes que cambian al momento de colocar el puntero del Mouse sobre el grafico.
Pág. 4
Centro Americano Integral de Idiomas y Computación 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 tamaño de borde.
Insertar Tabla.
Nos dirigimos al Menó Insertar y escogemos tablas y luego llenamos los datos según 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
Pág. 5
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Guardar esta página con el nombre de Index.
Verificar el la pagina cada uno de los ingresos que se han realizado
Pág. 6
Práctica 1
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Pág. 7
Tipo de letra: Arial Tamaño:24
Color: Azul Negrita
Tipo de letra: Arial Tamaño:34
Color: Rojo Negrita
Insertar imagen con el ancho: 580
Altura:5
Insertar imagen de Sustitución
Altura:106 Ancho:113
Imagen de Fono se encuentra en las propiedades de la Página
Viñetas, se encuentran en las propiedades de la Página
Insertar Imagen
Altura: 120 Ancho:5
Fuente: Arial Tamaño:12
Color: Negro
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Pág. 8
Imagen de Sustitución
Tabla de Columnas: 2 Filas:3
Grafico de altura: 5 ancho:500
Tabla Principal Columnas 3 Filas: 1
Tabla Interna Columnas: 1 Filas:8
Gráfico de Altura: 5 Ancho: 350
Tabla Interna Columnas: 2 Filas: 6
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
BOTONES FLASH
El Botón flash es un botón actualizable basado en una plantilla flash en la que en mucho de los botones también podemos añadir textos, color de fondo, y vínculos con otros archivos y páginas.
Para Seleccionar el Botón Flash siga los siguientes pasos.
1. Dar clic en el menú Insertar
2. Media
3. Botón Flash
Estilo.- Selecciona el Estilo de botón que desea en la lista
Texto del botón.- El texto que escriba reemplazará al Button Text.
Fuente.- Selecciona la fuente del texto.
Tamaño.- Selecciona el tamaño del texto que ira en el botón
Vínculo. En este campo vamos a introducir el vínculo absoluto o relativo al botón
Destino.- Se especifica la ubicación en que se abrirá el archivo
Pág. 9
CLASE 2
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Insertar un texto Flash
El objeto texto flash permite crear e insertar una película flash que solo contiene texto, esto permite crear una pequeña película de gráficos con fuentes de diseño 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
Tamaño.- Sirve para cambiar el tamaño
Atributos de estilo.- el objetivo es cambiar los estilos, Negrita, Cursiva y las alineaciones
Color de sustitución.- Establece el color de sustitución donde que aparece cuando el puntero pasa sobre el objeto del texto flash
Texto.- En este botón se introduce el texto deseado.
Vínculo.- se utiliza para asociar un vínculo con el objeto de texto flash, o con un botón flash.
Destino.- Se introduce o especifica el marco o la ventana de destino en la que se desea que cargue el vínculo.
Color de Fondo.- se elije el color de fondo para el texto.
Pág. 10
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
CapasUna capa es un elemento de página HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posición absoluta asignada. Las capas pueden contener texto, imágenes 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 también pulsando la tecla F2
Botón Dibujar Capas
Pág. 11
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Pág. 12
Práctica 2
Tabla completa hecha de 5 columnas y 3 filas
Imagen de Sustitución
Texto en marquesina
Texto Flash
Tabla insertada con borde 0 de 1 Columnas y 5 Filas además cada celda tiene relleno
Seis Capas y en cada una de ellas se inserta una imagen
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Marcos
Los marcos son frames que sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras si pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página 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 dirigiéndose al Menú Archivo >> Nuevo >> Escogemos la categoría Conjunto de Marcos y seleccionamos el marco deseado como se muestra en la imagen
Pág. 13
Clase 3
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Líneas de tiempo
HTML dinámico se refiere ala capacidad de cambiar el estilo o propiedades de posicionamiento
por medio de un lenguaje de script.
Las líneas de tiempo utilizan HTML dinámico para cambiar las propiedades de una capa o una
imagen en una serie de cuadros a través del tiempo.
Las líneas de tiempo crean animación cambiando la posición, tamaño, visibilidad y orden de
una capa en el tiempo. Las líneas de tiempo también son útiles para otras acciones que podemos
querer que ocurran luego de que una página se carga. Por ejemplo, una línea de tiempo puede
cambiar una imagen o pueden ejecutar un
comportamiento aun determinado tiempo.
Las funciones de capa de las líneas de tiempo funcionan solo en navegadores de generación 4 0
superiores.
Para ver el código Javascript generado por una línea de tiempo, es necesario abrir el HTML
inspector. El código correspondiente estará en la función MM_initTimelines dentro de una
etiqueta sCRIPT en el HEAD del documento.
El inspector de línea de tiempo representa las propiedades de capas e imágenes a través del
tiempo. Para abrirlo debemos ir a Ventana/línea de tiempo (Window/Timelines).
La ventana que se abre contiene un cabezal de reproducción y está dividido en cuadros como
una película. También posee canales en donde pueden ponerse distintos materiales.
Pág. 14
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Para animar una capa, una vez creada, abrimos el inspector de línea de tiempo.
Tomamos la capa y la arrastramos hasta el primer canal de la línea de tiempo (justo debajo del
cabezal). Se habrá agregado una línea 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 posición original hasta el lugar donde
lo pusimos finalmente
Menú emergente Línea de tiempo .- Especifica qué líneas de tiempo del documento se están
mostrando actualmente en el panel Líneas de tiempo.
Cabezal de reproducción .- Muestra qué fotograma de la línea de tiempo se está mostrando
actualmente en la ventana de documento.
Números de fotograma.- Indica la numeración secuencial de los fotogramas. El número que
aparece
entre los botones Atrás y Reproducir corresponde al fotograma actual. La duración de la
animación se controla estableciendo el número total de fotogramas y el número de fotogramas
por
segundo (fps). El valor predeterminado de 15 fotogramas por segundo es una buena velocidad
media para la mayoría de los navegadores que se ejecutan en sistemas normales Windows o
Macintosh.
Nota: las velocidades más altas no mejoran necesariamente los resultados. Los navegadores
siempre reproducen todos los fotogramas de la animación, incluso aunque en el sistema del
Pág. 15
Los puntos blancos son keyframes, la barra azul demuestra movimiento
Centro Americano Integral de Idiomas y Computación 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 línea de tiempo.
Canal Comportamientos.- Es el canal de los comportamientos que deben ejecutarse en
un fotograma determinado de la línea de tiempo.
Barras de animación Muestran la duración de la animación de cada objeto. Una sola
fila puede incluir múltiples barras en representación 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 posición, por ejemplo). Dreamweaver calcula valores
intermedios para fotogramas en fotogramas clave. Los fotogramas clave se señalan
mediante pequeños círculos.
Canales de animación Muestran barras para animar capas e imágenes.
Por último tildarnos el casillero autoplay de la ventana de línea de tiempo. Cuando
veamos la página 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 línea de tiempo
Rebobinar Desplaza el cabezal de reproducción hasta el primer fotograma de la línea
de tiempo.
Atrás Desplaza el cabezal de reproducción un fotograma hacia la izquierda. Haga clic
en el botón Atrás y manténgalo presionado para reproducir la línea de tiempo hacia
atrás.
Reproducir Desplaza el cabezal de reproducción un fotograma hacia la derecha. Haga
clic en el botón Reproducir y manténgalo presionado para reproducir la línea de tiempo
hacia delante.
Reprod. auto. Inicia automáticamente la reproducción de una línea de tiempo cuando la
página actual se carga en un navegador.
Reprod. auto. adjunta un comportamiento a la sección body de la
página que ejecuta la acción Reproducir línea de tiempo cuando se carga la página.
Bucle Hace que la línea de tiempo actual se reproduzca en bucle indefinidamente
mientras la página esté abierta en un navegador. Bucle inserta el comportamiento Ir a
Pág. 16
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
fotograma en línea de tiempo en el canal Comportamientos después del último
fotograma de la animación. Haga doble clic en el marcador del comportamiento en el
canal Comportamientos para editar los parámetros de dicho comportamiento y cambiar
el número de repeticiones en bucle.
Vínculos
Hay varias formas de poner un vínculo en Dreamweaver.
Podemos hacerlo desde la barra insertar (en modo Común) seleccionando el icono en forma de
cadena, se abre una ventana de diálogo con varias casillas, en texto ponemos la palabra que
queremos enlazar, en vínculo pondremos la dirección html donde queremos ir y en destino
podemos elegir entre: _blank, _parent,_self y _ top.
Por ahora solo utilizaremos _blank si queremos que nuestro enlace se abra en una ventana nueva
del navegador.
Otra forma es hacerlo desde el inspector de propiedades. Hay que seleccionar el texto a
enlazar y en la casilla de vínculo introducimos la dirección del enlace.
Si no sabemos la dirección 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
dirección en el panel archivos.
Si es un enlace externo hay que poner toda la dirección web completa, si es un enlace a
nuestro sitio web solo ponemos los elementos de la dirección no comunes del enlace.
Pág. 17
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Podemos definir el color y formato de los vínculos desde la ventana de propiedades de la
página. Iremos a vínculos donde podemos definir cuatro colores diferentes, uno para cada
estado del enlace, también podemos definir la fuente, el tamaño y el estilo del subrayado del
enlace. También podemos utilizar imágenes para crear vínculos, en este caso seleccionamos la
imagen y en la casilla de vínculo del inspector de propiedades escribimos la dirección del
enlace.
Pág. 18
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Desarrollo de la Práctica
Para empezar a desarrollar esta práctica tenemos que crear un marco que de esta forma
Pág. 19
Práctica 3-4
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Este nuevo Página se lo tiene que hacer tanto para 24 Horas, De 9 a 10, En corto, Deporte Total, Fórmula1, Más Fútbol, y cada una de ellas enlazadas para las palabras como se muestran en el documento
Pág. 20
Fondo de Pantalla de Teleamazonas
Menú Insertar >> Fecha
El texto Noticias va con el tipo de letra: Arias Tamaño: 14 Color: #FF9900
El texto Noticias va con el tipo de letra: Arias Tamaño: 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 Tamaño:12 Color Azul y realizar los vínculos para cada una de las páginas que se va a enlazar
El mismo formato se aplica para las otras opciones en la parte inferior
El texto 24 horas es hecho con capa y con un formato Estilo2 Tamaño:36 color: #FF9900 con un capa y animado con línea de tiempo
El texto de Lunes a viernes esta hecho con capas con un color: #0000FF Estilo3 y Tamaño: 12
La imagen se la coloca desde Insertar >> Imágen
Este texto esta hecho en capas con el Estilo4 tamaño: 12 y color: #0000FF
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
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 página a través del menú Insertar,
opción Objetos de formulario. A través de esta opción se puede acceder a la lista de
todos los objetos de formulario que pueden ser insertados en la página. 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 añadir un cuadro de texto. El Campo de texto
solo permite escribir una línea al usuario, mientras que el Área de texto permite escribir varias.
Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades.
También es posible definirlo como Contraseña. A continuación tienes un ejemplo de cada uno
de estos tres tipos.
A través del inspector de propiedades es posible asignar también el ancho del cuadro de
texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.
Pág. 21
Clase 4
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Botón: Es el botón tradicional. El botón 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).
También es posible cambiar el texto del botón, a través del campo Etiqueta del inspector
de propiedades.
Casilla de verificación: Es un cuadrito que se puede activar o desactivar. Puede asignársele
el estado inicial como Activado o como Desactivado.
Botón de opción: Es un pequeño botón redondo que puede activarse o desactivarse. Si hay
varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno,
automáticamente se desactivan los demás.
Lista/Menú: Una lista o menú es un elemento de formulario que lleva asociada una
lista de opciones. Los elementos se añaden a través de botón 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 través de Selecciones puede permitirse que se
seleccionen varios simultáneamente.
Pág. 22
Centro Americano Integral de Idiomas y Computación 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 través del menú Insertar, opción Formulario. Una vez creado un
formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por
líneas rojas discontinuas, similar al de la imagen de siguiente.
Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya
sabes puedes insertarlos a través del menú Insertar, opción Objetos de formulario.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios.
Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo
que facilita su comprensión y mejora su apariencia.
Pág. 23
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Pág. 24
Practica 5
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Marquesinas en DreamWeaver
Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden
desplazarse de un lado a otro de la ventana en forma de línea. Las marquesinas no se
pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a
través del código.
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. También es posible especificar algunas características
de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda
indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. 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 código puedes ver a
continuación: <marquee behavior="alternate">
Texto
</marquee>
Pág. 25
Clase 6
Centro Americano Integral de Idiomas y Computación 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 imágenes que
serán añadidas al Álbum.
Para iniciar el Asistente que le guiará en la creación de su Album de Fotos Web, deberá
escoger la opción Comandos del menú principal del programa, inmediatamente
seleccione la opción Crear álbum de fotos web del menú emergente.
Al escoger esta pantalla llenaremos los campos
Pág. 26
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
La acción anterior le dirigirá al cuadro de dialogo Crear álbum de fotos web, acá
observará ciertos campos que deberá rellenar.
La mayoría de las respuestas a los campos en el cuadro de dialogo Crear álbum de Fotos
son intuitivas, sin embargo, se explicarán algunos campos que podrán no ser muy
intuitivos para el usuario. A continuación se explicarán algunos de éstos campos.
Carpeta de imágenes de origen: Este campo se refiere a la ubicación de las imágenes
que se desean colocar en el Album, esta carpeta puede estar fuera del Sitio.
Carpeta de destino: Este campo se refiere a la ubicación de la carpeta donde se
colocarán las imágenes seleccionadas anteriormente (imágenes de origen), esta carpeta
debe ser creada dentro del Sitio
Tamaño miniatura: Este apartado se refiere al tamaño de las imágenes miniatura o
thumbnails, éstas servirán de vista previa a los visitantes, las opciones que presenta este
apartado son:
36 x 36 píxeles
72 x 72 píxeles
100 x 100 píxeles
144 x 144 píxeles
200 x 200 píxeles
Formato de miniatura: Este apartado se refiere a la extensión que utilizarán las
imágenes miniaturas o thumbnails, ésta extensión implica una calidad en las imágenes y
el número de colores en las mismas.
Formato de Foto: Implica las mismas consideraciones que el apartado anterior, pero
esta vez está aplicada a las imágenes tamaño real.
Pág. 27
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Al finalizar el rellenado de los campos, deberá dar click en la opción Aceptar. Esta
acción hará un llamado a Macromedia Fireworks 8 y comenzará el Progreso de la
operación por lotes, es decir, Macromedia Fireworks comenzará a procesar todas las
imágenes que se encuentran en la Carpeta de imágenes de origen.
Luego que Macromedia Fireworks termine el Progreso de operación por lotes, se le
indicará en Macromedia Dreamweaver que el Album de Fotos Web se ha creado con
exito!
Para esta práctica se le pedirá al estudiante traer fotos para poder crear el album de fotos
Pág. 28
Práctica 6
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Repaso General 1
Pág. 29
Centro Americano Integral de Idiomas y Computación 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 Computación es un Texto Flash
C.- Esta palabra esta realizada dentro de una capa y se le ha realizado un efecto con la
línea de tiempo (el efecto puede ser a su gusto)
D.- Esta imagen esta dentro de una capa
E.- Botones Flash que están enlazadas a cada una de las páginas 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
Pág. 30
A B C D E
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Se hacen los vínculos con cada una de las páginas dentro del Mainframe para que las páginas
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 imágenes para
esta práctica.
Repaso General 2
Pág. 31
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Repaso General 3
Pág. 32
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
TRABAJANDO CON DREAMWEAVER Y ASP
Para trabajar con páginas ASP necesitará un servidor Web en funcionamiento para lo cual le ayudaremos a la instalación del Servidor Web Microsoft en su equipo local.
Instalación 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 instalación, 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á automáticamente la siguiente pantalla
Pág. 33
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
- Luego selecciones Instalar componentes adicionales de Windows, a continuación se mostrará la siguiente ventana
- Seleccione Servicio de Internet Information Server (IIS), luego presione el botón siguiente se mostrará la siguiente ventana.
Pág. 34
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
- Luego de Finalizar la instalación se mostrará la siguiente ventana, donde indicará que la instalación ha finalizado.
- Presione el botón finalizar de la ventana del asistente para componente de Windows.
- Para confirmar se la instalación finalizó correctamente, ingrese al Internet Explorer luego escriba la dirección http: //localhost/localstart.asp , si la instalación tuvo éxito se debe mostrar la siguiente página.
Nota: no es necesario que tengan internet para que este servicio (IIS) funcione correctamente.
Pág. 35
Centro Americano Integral de Idiomas y Computación 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 práctico 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 botón de office y escoger nuevo, y en la parte inferior le escribimos el nombre de la base de datos y dar clic en el botón crear
Pág. 36
Centro Americano Integral de Idiomas y Computación 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.
Luego Procedemos a guardar la tabla con el nombre de Personal
Nota: Llenar los registros con al menos unas diez personas
Pág. 37
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Creando la Conexión (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 continuación 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.
Pág. 38
Centro Americano Integral de Idiomas y Computación 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 añadir un nuevo DNS a la lista. Aparecerá un cuadro de diálogo
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
Pág. 39
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Luego aparecerá una pantalla y asigne un Nombre del origen de datos, en este caso colocamos el nombre de la base de datos (Database), en la Descripción colocamos una descripción de la base de datos., luego presionamos el botón Seleccionar.
Luego se mostrará la siguiente ventana Seleccionar, seleccionamos la base de datos DataBase y presionamos Aceptar a todas las ventanas ODBC
Pág. 40
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
Definir un Sitio DreamweaverAntes de empezar a trabajar con Páginas 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 páginas ASP, para este ejemplo hemos colocado estos nombres a los directorios, si desean pueden colocar otro nombre.
- Si teienes páginas o archivos de imágenes pueden copiar sus archivos a este directorio y probar su correcto funcionamiento o también para empezar a trabajar con aplicaciones ASP.
Pág. 41
Centro Americano Integral de Idiomas y Computación 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 botón nuevo > Sitio
- En la ventana definición del Sitio seleccione la ficha avanzada
- En la Sección Categoría selecciones Datos locales
- En Nombre del Sitio colocamos Intranet, este nombre es solo de referencia podemos colocar cualquier otro nombre si usted desea.
Pág. 42
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
- En la Carpeta raíz local colocamos la siguiente dirección :
- 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 Imágenes colocamos la siguiente dirección: 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 Categoría – Servidor de Prueba
- En Modelo de Servidor seleccionamos ASP VBScript
- En Acceso colocamos Local/RED
Pág. 43
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
- En la carpeta de Servidor colocamos la siguiente dirección 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 automáticamente marcamos con un check.
- En el Prefijo URL colocamos la siguiente dirección http://localhost/ luego presionamos el botón Aceptar para finalizar
- 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 imágenes , si no se ha guardado los archivos los directorios se mostrarán 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 Categoría seleccionamos Página Dinámica y seleccionamos ASP VBScript y presionamos el botón crear
Pág. 44
Centro Americano Integral de Idiomas y Computación CAINICOMPUT
-
- A continuación, creará un juego de registros para mostrar los datos almacenados en una base de datos. Un juego de registros es un subconjunto de datos extraídos 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 botón o signo (+) y seleccione el juego de registros (Consulta). Aparecerá el cuadro de dialogo Juego de Registros.
Pág. 45
Centro Americano Integral de Idiomas y Computación 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 Conexión, 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á información para la primera tabla de la base de datos DataBase
Nota: Si no aparece la Conexión 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
Pág. 46