P. 1
Manual de Dreamweaver 8

Manual de Dreamweaver 8

|Views: 36|Likes:
Publicado porprofesorchonero

More info:

Published by: profesorchonero on Apr 18, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

01/24/2014

pdf

text

original

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. 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 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. Barra Insertar Grupo de Paneles

Barra de Herramientas del Documento Sector de Etiquetas Inspector de Propiedades

Pág. 2

Centro Americano Integral de Idiomas y Computación

CAINICOMPUT

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

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.

Pág. 3

Centro Americano Integral de Idiomas y Computación

CAINICOMPUT

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. 4

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. 5

6 . combinar celdas. insertar tablas. Nos dirigimos al Menó Insertar y escogemos tablas y luego llenamos los datos según lo necesitado. insertar filas y comulgas y cambiar el tamaño de borde. 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. podremos entre otras cosas. Insertar Tabla.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Tablas En este tema vamos a ver como trabajar con tablas.

Centro Americano Integral de Idiomas y Computación CAINICOMPUT Práctica 1 Guardar esta página con el nombre de Index. Verificar el la pagina cada uno de los ingresos que se han realizado Pág. 7 .

8 .Imagen de Fono se encuentra en las Centro Americano Integral de Idiomas y Computación CAINICOMPUT propiedades de la Página Desarrollo detallado de la Práctica 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 Fuente: Arial Tamaño:12 Color: Negro Insertar imagen de Sustitución Altura:106 Ancho:113 Viñetas. se encuentran en las propiedades de la Página Insertar Imagen Altura: 120 Ancho:5 Pág.

9 .Centro Americano Integral de Idiomas y Computación Tabla de Columnas: 2 Filas:3 CAINICOMPUT Imagen de Sustitución 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 Pág.

Centro Americano Integral de Idiomas y Computación CAINICOMPUT CLASE 2 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. Para Seleccionar el Botón Flash siga los siguientes pasos. En este campo vamos a introducir el vínculo absoluto o relativo al botón Destino.Selecciona el tamaño del texto que ira en el botón Vínculo.. color de fondo. Dar clic en el menú Insertar 2. 1.Selecciona el Estilo de botón que desea en la lista Texto del botón.. y vínculos con otros archivos y páginas.. 10 . Fuente. Media 3.El texto que escriba reemplazará al Button Text.Se especifica la ubicación en que se abrirá el archivo Pág. Botón Flash Estilo. Tamaño...Selecciona la fuente del texto.

.se utiliza para asociar un vínculo con el objeto de texto flash..se elije el color de fondo para el texto. Cursiva y las alineaciones Color de sustitución.Selecciona el tipo de fuente que colocaremos en el texto flash Tamaño.Establece el color de sustitución donde que aparece cuando el puntero pasa sobre el objeto del texto flash Texto.. esto permite crear una pequeña película de gráficos con fuentes de diseño y el texto que usted desee.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. Destino. Texto Flash Fuente. 11 .Se introduce o especifica el marco o la ventana de destino en la que se desea que cargue el vínculo. Menú Insertar 2. Negrita. Media 3. Pág.. Para insertar un texto flash siga los pasos 1.el objetivo es cambiar los estilos... Color de Fondo... o con un botón flash.Sirve para cambiar el tamaño Atributos de estilo. Vínculo.En este botón se introduce el texto deseado.

Centro Americano Integral de Idiomas y Computación CAINICOMPUT Capas Una capa es un elemento de página HTML (en concreto. Capas O también pulsando la tecla F2 Botón Dibujar Capas Pág. 12 . Ventana 2. 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.

Centro Americano Integral de Idiomas y Computación CAINICOMPUT 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 Pág. 13 .

como pueden ser el logotipo y la barra de navegación. Por ejemplo en la imagen derecha Creando las marcos Existen varias formas de crear un marco. Cada uno de los marcos de una página contiene un documento HTML individual. Además de mejorar la funcionalidad. pueden mejorar también la apariencia. 14 .Centro Americano Integral de Idiomas y Computación CAINICOMPUT Clase 3 Marcos Los marcos son frames que sirven para distribuir mejor los datos de las páginas. ya que permiten mantener fijas algunas partes. mientras que otras si pueden cambiar. 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.

También posee canales en donde pueden ponerse distintos materiales. 15 . El código correspondiente estará en la función MM_initTimelines dentro de una etiqueta sCRIPT en el HEAD del documento. tamaño. es necesario abrir el HTML inspector. 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. 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. visibilidad y orden de una capa en el tiempo. Pág. Para abrirlo debemos ir a Ventana/línea de tiempo (Window/Timelines). El inspector de línea de tiempo representa las propiedades de capas e imágenes a través del 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. una línea de tiempo puede cambiar una imagen o pueden ejecutar un comportamiento aun determinado tiempo.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. Por ejemplo. La ventana que se abre contiene un cabezal de reproducción y está dividido en cuadros como una película. Las líneas de tiempo crean animación cambiando la posición.

la barra azul demuestra movimiento Para animar una capa..Indica la numeración secuencial de los fotogramas. por ejemplo. incluso aunque en el sistema del Pág. Estos puntos indican lugares donde pueden pasar cosas. El número que aparece entre los botones Atrás y Reproducir corresponde al fotograma actual.Especifica qué líneas de tiempo del documento se están mostrando actualmente en el panel Líneas de tiempo. Hacemos clic en el keyframe del final. para animar un layer.Muestra qué fotograma de la línea de tiempo se está mostrando actualmente en la ventana de documento. Se habrá agregado una línea violeta con un punto redondo al comienzo y otro al final. luego tomamos el layer en la ventana de documento y lo desplazamos a otro lugar. Cabezal de reproducción . una vez creada. Los navegadores siempre reproducen todos los fotogramas de la animación. 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). 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 . Tomamos la capa y la arrastramos hasta el primer canal de la línea de tiempo (justo debajo del cabezal).. 16 .Centro Americano Integral de Idiomas y Computación CAINICOMPUT Los puntos blancos son keyframes. Nota: las velocidades más altas no mejoran necesariamente los resultados. abrimos el inspector de línea de tiempo. Se llaman keyframes o cuadros clave y nos pueden servir. 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. Números de fotograma..

Atrás Desplaza el cabezal de reproducción un fotograma hacia la izquierda.Centro Americano Integral de Idiomas y Computación CAINICOMPUT usuario no puedan alcanzar la velocidad especificada. Reprod. 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. Reproducir Desplaza el cabezal de reproducción un fotograma hacia la derecha. 17 . Por último tildarnos el casillero autoplay de la ventana de línea de tiempo. auto. Haga clic en el botón Atrás y manténgalo presionado para reproducir la línea de tiempo hacia atrás.. Bucle inserta el comportamiento Ir a Pág.Es el canal de los comportamientos que deben ejecutarse en un fotograma determinado de la línea de tiempo. Si queremos que repita dicho recorrido en forma indefinida. Inicia automáticamente la reproducción de una línea de tiempo cuando la página actual se carga en un navegador. Menú contextual. Barras diferentes no pueden controlar un mismo objeto en el mismo fotograma. la capa se animará y hará el recorrido prefijado. Fotogramas clave Son fotogramas de una barra en los que se han especificado propiedades del objeto (como posición. 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. La velocidad de fotogramas se omite si es superior a la que puede admitir el navegador. Cuando veamos la página en nuestro navegador. auto. por ejemplo). Barras de animación Muestran la duración de la animación de cada objeto. Canales de animación Muestran barras para animar capas e imágenes. Reprod. Dreamweaver calcula valores intermedios para fotogramas en fotogramas clave.. Una sola fila puede incluir múltiples barras en representación de otros tantos objetos. Bucle Hace que la línea de tiempo actual se reproduzca en bucle indefinidamente mientras la página esté abierta en un navegador. Haga clic en el botón Reproducir y manténgalo presionado para reproducir la línea de tiempo hacia delante. Los fotogramas clave se señalan mediante pequeños círculos. Canal Comportamientos.Contiene varios comandos relacionados con la línea de tiempo.

Pág. en texto ponemos la palabra que queremos enlazar. _parent. 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. en vínculo pondremos la dirección html donde queremos ir y en destino podemos del navegador. se abre una ventana de diálogo con varias casillas. Podemos hacerlo desde la barra insertar (en modo Común) seleccionando el icono en forma de cadena. si es un enlace a nuestro sitio web solo ponemos los elementos de la dirección no comunes del enlace. 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. Si es un enlace externo hay que poner toda la dirección web completa. 18 . Vínculos Hay varias formas de poner un vínculo en Dreamweaver._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.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. elegir entre: _blank. Hay que seleccionar el texto a enlazar y en la casilla de vínculo introducimos la dirección del enlace.

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. uno para cada estado del enlace. el tamaño y el estilo del subrayado del enlace.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. 19 . también podemos definir la fuente. También podemos utilizar imágenes para crear vínculos.

20 .Centro Americano Integral de Idiomas y Computación CAINICOMPUT Práctica 3-4 Desarrollo de la Práctica Para empezar a desarrollar esta práctica tenemos que crear un marco que de esta forma Pág.

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 Este nuevo Página se lo tiene que hacer tanto para 24 Horas. De 9 a 10. En corto. 21 . De 9 a 10.Centro Americano Integral de Idiomas y Computación CAINICOMPUT 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. Más Fútbol. Deporte Total. Fórmula1. 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 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 La imagen se la coloca desde Insertar >> Imágen Este texto esta hecho en capas con el Estilo4 tamaño: 12 y color: #0000FF Pág.

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. recibir preguntas. conocer las opiniones de los usuarios. como insertar uno. el número máximo de líneas o caracteres. El Campo de texto solo permite escribir una línea al usuario. así como algunas de sus propiedades. Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades. opción Objetos de formulario. Campo de texto y Área de texto: Permiten añadir un cuadro de texto. y el valor inicial del cuadro. mientras que el Área de texto permite escribir varias. Elementos de formulario Los elementos de formulario pueden insertarse en una página a través del menú Insertar. crea una encuesta. Pág. para que se utiliza. Los formularios se utilizan para recoger datos de los usuarios. que elementos puede contener y como pueden validarse los datos introducidos a él.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Clase 4 Formularios Vamos a ver que es un formulario. A través del inspector de propiedades es posible asignar también el ancho del cuadro de texto. 22 . nos pueden servir para realizar un pedido en una tienda virtual. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario. También es posible definirlo como Contraseña. A continuación tienes un ejemplo de cada uno de estos tres tipos. etc.

pero si se trata de una lista. a través de Selecciones puede permitirse que se seleccionen varios simultáneamente. automáticamente se desactivan los demás. Si hay varios del mismo formulario. Lista/Menú: Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones. Casilla de verificación: Es un cuadrito que se puede activar o desactivar. solo puede haber uno activado. Restablecer formulario (borrar todos los campos del formulario). 23 . solo es posible elegir uno de los elementos. a través del campo Etiqueta del inspector de propiedades. Botón de opción: Es un pequeño botón redondo que puede activarse o desactivarse.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Botón: Es el botón tradicional. Puede asignársele el estado inicial como Activado o como Desactivado. También es posible cambiar el texto del botón. Pág. Cuando se trata de un menú. Cuando se activa uno. El botón puede tener asignadas tres opciones: Enviar formulario. Los elementos se añaden a través de botón Valores de lista del inspector de propiedades. o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

que como ya sabes puedes insertarlos a través del menú Insertar. opción Objetos de formulario. similar al de la imagen de siguiente. este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario. Pág. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. lo que facilita su comprensión y mejora su apariencia. opción Formulario. Una vez creado un formulario. Crear formularios Puedes crear formularios a través del menú Insertar. Dentro de dicho formulario se podrán insertar los elementos de formulario. Utilizando tablas se consigue una mejor distribución de los elementos del formulario. para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos. 24 .

25 .Centro Americano Integral de Idiomas y Computación CAINICOMPUT Practica 5 Pág.

La marquesina.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Clase 6 Marquesinas en DreamWeaver Las marquesinas son texto. También es posible especificar algunas características de la marquesina. es necesario hacerlo a través del código. pero si lo deseas puedes hacer que estas propiedades varíen. que pueden desplazarse de un lado a otro de la ventana en forma de línea. por defecto. Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. cuyo código puedes ver a continuación: <marquee behavior="alternate"> Texto </marquee> Pág. se desplaza de derecha a izquierda indefinidamente. como si rebotara en los extremos. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina. imágenes. o una mezcla entre texto e imágenes. 26 . Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver. la marquesina se desplazará de lado a lado de la ventana. Si pones <marquee behavior="alternate">. en lugar de desplazarse continuamente de derecha a izquierda. si pones <marquee behavior="slide">. Por ejemplo. la marquesina hará el desplazamiento una sola vez y se detendrá.

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 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. 27 . Al escoger esta pantalla llenaremos los campos Pág. para tal efecto. inmediatamente seleccione la opción Crear álbum de fotos web del menú emergente. en primera instancia usted necesitará tener una carpeta que contenga las imágenes que serán añadidas al Álbum.

pero esta vez está aplicada a las imágenes tamaño real. 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. esta carpeta puede estar fuera del Sitio. sin embargo. acá observará ciertos campos que deberá rellenar. se explicarán algunos campos que podrán no ser muy intuitivos para el usuario. 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). éstas servirán de vista previa a los visitantes.Centro Americano Integral de Idiomas y Computación CAINICOMPUT La acción anterior le dirigirá al cuadro de dialogo Crear álbum de fotos web. 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. A continuación se explicarán algunos de éstos campos. ésta extensión implica una calidad en las imágenes y el número de colores en las mismas. La mayoría de las respuestas a los campos en el cuadro de dialogo Crear álbum de Fotos son intuitivas. 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. 28 . Pág. Formato de Foto: Implica las mismas consideraciones que el apartado anterior.

29 . Esta acción hará un llamado a Macromedia Fireworks 8 y comenzará el Progreso de la operación por lotes. se le indicará en Macromedia Dreamweaver que el Album de Fotos Web se ha creado con exito! Práctica 6 Para esta práctica se le pedirá al estudiante traer fotos para poder crear el album de fotos Pág. Macromedia Fireworks comenzará a procesar todas las imágenes que se encuentran en la Carpeta de imágenes de origen.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Al finalizar el rellenado de los campos. deberá dar click en la opción Aceptar. Luego que Macromedia Fireworks termine el Progreso de operación por lotes. es decir.

Centro Americano Integral de Idiomas y Computación CAINICOMPUT Repaso General 1 Pág. 30 .

La imagen que se encuentra aquí esta dentro de una capa B..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. Vamos a trabajar en la parte superior A B C D E A.El texto Centro Americano Integral de Idiomas y Computación es un Texto Flash C. Crear un marco como se muestra en el grafico 2. 4.. 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 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..Botones Flash que están enlazadas a cada una de las páginas para poder ver los detalles de cada una de ellas.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Desarrollo del Repaso General 1 1..Esta imagen esta dentro de una capa E. 31 ..

Repaso General 2 Pág. 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. 32 .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.

Centro Americano Integral de Idiomas y Computación CAINICOMPUT Repaso General 3 Pág. 33 .

como se muestra en el siguiente grafico.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. luego se mostrará automáticamente la siguiente pantalla Pág. Esta carpeta se crea durante su instalación. 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. Si no existe esta carpeta lleve a cabo los siguientes pasos: Inserte el CD de Windows XP Profesional o SP2. 34 .

Pág.Centro Americano Integral de Idiomas y Computación - CAINICOMPUT a Luego selecciones Instalar componentes adicionales de Windows. continuación se mostrará la siguiente ventana - Seleccione Servicio de Internet Information Server (IIS). 35 . luego presione el botón siguiente se mostrará la siguiente ventana.

donde indicará que la instalación ha finalizado. Pág. 36 .Centro Americano Integral de Idiomas y Computación CAINICOMPUT - Luego de Finalizar la instalación se mostrará la siguiente ventana. - Presione el botón finalizar de la ventana del asistente para componente de Windows.

Nota: no es necesario que tengan internet para que este servicio (IIS) funcione correctamente. ingrese al Internet Explorer luego escriba la dirección http://localhost/localstart. Pág.Centro Americano Integral de Idiomas y Computación - CAINICOMPUT Para confirmar se la instalación finalizó correctamente.asp. 37 . si la instalación tuvo éxito se debe mostrar la siguiente página.

al terminar de cargar el programa. 38 . necesitamos crear una base de datos. se muestra la siguiente ventana. Para que este ejemplo sea práctico creamos la base de datos en Microsoft Access.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Creando una base de datos en Access Antes de empezar a trabajar con Dreamweaver 8. Abrimos Microsoft Access. - 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.

Pág. Una vez creada la base de datos.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. como se muestra en la figura Y agregamos los siguientes campos. empezamos creando una tabla. 39 .

40 .Centro Americano Integral de Idiomas y Computación CAINICOMPUT Luego Procedemos a guardar la tabla con el nombre de Personal Nota: Llenar los registros con al menos unas diez personas Pág.

Pantalla de la ficha Controladores Si no ha instalado el controlador necesario descargue e instale los paquetes de Microsoft Access dbase driver.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. Pág. 41 .

Aparecerá un cuadro de diálogo Crear un nuevo origen de datos con todos los controladores cargados 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.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Luego haga clic en la ficha DNS del sistema. Seleccione Driver to Microsoft Access (*. 42 .mdb) y luego haga clic en finalizar Pág.

en este caso colocamos el nombre de la base de datos (Database).. luego presionamos el botón Seleccionar. en la Descripción colocamos una descripción de la base de datos.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Luego aparecerá una pantalla y asigne un N ombre del origen de datos. Luego se mostrará la siguiente ventana Seleccionar. seleccionamos la base de datos DataBase y presionamos Aceptar a todas las ventanas ODBC Pág. 43 .

44 . 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. Para definir un sitio Dreamweaver haremos lo siguiente.Centro Americano Integral de Idiomas y Computación CAINICOMPUT Definir un Sitio Dreamweaver Antes 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. 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. - Pág. para este ejemplo hemos colocado estos nombres a los directorios.

45 . 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 Pág. En la barra de Menú de Dreamweaver .Centro Americano Integral de Idiomas y Computación CAINICOMPUT Definir una carpeta local Para definir la carpeta local de Dreamweaver haremos lo siguiente.

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 Pág. - 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.Centro Americano Integral de Idiomas y Computación CAINICOMPUT - En Nombre del Sitio colocamos Intranet. - En Actualizar lista de archivos locales auto. 46 . este nombre es solo de referencia podemos colocar cualquier otro nombre si usted desea.

47 .Centro Americano Integral de Idiomas y Computación CAINICOMPUT - En Modelo de Servidor seleccionamos ASP VBScript - En Acceso colocamos Local/RED - 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 Pág.

48 . Creando un Juego de Registros. En la ventana Nuevo Documento seleccionamos la ficha General. de la barra de Menú de Dreamweaver.Centro Americano Integral de Idiomas y Computación CAINICOMPUT - Para ver el sitio que hemos creado seleccionamos Ventana>> Archivos. en Categoría seleccionamos Página Dinámica y seleccionamos ASP VBScript y presionamos el botón crear Pág. Para crear un juego de registros haremos lo siguiente - Primero creamos una nueva pagina en Archivo>> Nuevo. 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. en la ventana archivo seleccionamos la ficha Sitio Luego se mostrara el directorio intranet con el directorio imágenes .

49 . creará un juego de registros para mostrar los datos almacenados en una base de datos.Centro Americano Integral de Idiomas y Computación CAINICOMPUT - - A continuación. - Pág. 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.

Centro Americano Integral de Idiomas y Computación CAINICOMPUT - En el cuadro de texto nombre. Todo Pág. 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. el juego de registro se actualizará con los registros de la tabla Personal. 50 . 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. En columnas acepte el valor predeterminado. deje el nombre Recordset1. 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.

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->