Universidad del Valle de Mxico

PRACTICAS DE DREAWEAVER
Sergio Roberto Santiago Cruz

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

Prctica 1

ENTORNO DE TRABAJO DE DREAMWEAVER

OBJETIVO: El alumno conocer todos los elementos del entorno de trabajo de Dreamweaver INSTRUCCIONES: Seale y escriba el nombre de cada uno de los elementos que conforman el rea de trabajo en el esquema y posteriormente escriba en un listado para que sirve cada uno de ellos

Docente. Sergio Roberto Santiago Cruz

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

Prctica 1

DEFINICIN DE UN SITIO

OBJETIVO: El alumno crear un Sitio Local en su Computadora. INSTRUCCIONES: Complete el Diagrama de Flujo de una Pgina WEB, de un tema a su eleccin.
Defina el Sitio o Site, con el nombre de su primer apellido y cree un flder de llamado Prcticas V (APELLIDO).
1. Completar el Diagrama de Flujo. Utilizando los cuadros siguientes y en caso necesario dibujando otros, elabore el diagrama de flujo de una pgina de un tema especfico. Coloque el nombre de cada una de las paginas y el contenido que tendr, escriba en una lista los colores y elementos que utilizar esta pagina.

almacenamiento

2.

Cree un sitio local siguiendo los pasos que ya conoce en Dreamweaver

Elije el men Site (Sitio) > New site (Nuevo sitio). Aparecer el siguiente cuadro de dialogo, en el cual tienes dos pestaas que te permiten seleccionar si quieres utilizar el asistente o no Escribimos el nombre del sitio Prctica1 Damos clic en Next> En la siguiente pantalla nos pregunta si deseamos trabajar con alguna tecnologa de ASP, ColdFUsion, etc, seleccionamos no y damos clic en Next> En el cuadro de dilogo siguiente tenemos tres opciones, la primera nos permite editar los archivos en nuestra maquina y subirlos despus a la red, la segunda nos dice que si edita los archivos directamente en el servidor, y la tercera que los modifica en el servidor utilizando FTP, nosotros utilizaremos la primera. Y en donde nos pregunta el nombre de la carpeta en donde guardaremos nuestros archivos, tecleamos la ruta. Damos clic en Next>

Docente. Sergio Roberto Santiago Cruz

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

La siguiente pantalla nos pregunta la forma de conectarnos a nuestro sitio WEB. Las opciones son las siguientes, de ellas seleccionaremos NONE

En la segunda parte teclearemos la ruta donde se guardaran los archivos de llegada.

La ltima pantalla nos pregunta si deseamos checar los archivos de salida, para evitar que varias personas utilicen el mismo archivo al mismo tiempo, nosotros seleccionaremos la segunda.

Entonces el cuadro de dialogo nos proporciona un sumario de las opciones seleccionadas, si estamos de acuerdo damos clic en Done(Crear) si no regresamos con Back<

Docente. Sergio Roberto Santiago Cruz

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

SEP 115 CICLO 01-09

DEPARTAMENTO DE BACHILLERATO

ACADEMIA DE INFORMTICA TECNOLOGIAS DE LA INFORMACION III

Prctica 2

CREACIN DE HIPERENLACES
a sus datos

OBJETIVO: El alumno crear las pginas WEB correspondientes personales INSTRUCCIONES:

Cree cuatro pginas con los datos correspondientes. Primera Pgina contiene sus datos personales ( Nombre, Edad, etc.) y tres vnculos. Cree las pginas referentes a los vnculos (Pasatiempos, Currculo Vitae y Mascotas).

Docente. Sergio Roberto Santiago Cruz

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

Prctica 2b

CREACIN DE TABLAS

Objetivo de la prctica: Al finalizar la prctica el alumno conocer las ventajas del uso de Tablas y Marcos en una pgina Web. As como los procesos y mtodos para la configuracin de estos elementos. Introduccin Todos los objetos se alinean por defecto a la izquierda de las pginas Web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizar. Hoy en da, la mayora de las pginas Web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo. Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. Al igual que las tablas, los marcos o frames 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 s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Configuracin de tablas en la pgina Web Para insertar una tabla, utilizamos la barra Insert en la categora de Common, o bien en la misma barra podemos elegir Layout

1.- Abre una pgina nueva y guarda en el sitio que ya existe de las prcticas anteriores llama a esta Tabla. 2.- Inserta una tabla con las opciones predeterminadas. 3.- Selecciona la tabla y describe las opciones en el Inspector de propiedades. Reporta tus observaciones. 4.- Selecciona una celda y describe las opciones en el inspector de propiedades. Reporta tus observaciones. Trabajando con el inspector de propiedades de la tabla o la celda entrega una tabla como la mostrada en la pgina Web siguiente. 5.- Respalda el documento. Manejo de Marcos en la pgina Web Crear marcos
Docente. Sergio Roberto Santiago Cruz

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

1.- Para crear un marco, primero hay que abrir un nuevo documento. 2.- Elige la categora de Layout en la barra de herramientas Insert

3.- A travs de esta opcin puede elegirse el tipo de marco que va a crearse. 4.- Elegimos la opcin de Left Frame (marco a la izquierda) 5.- Como puedes ver en la imagen, aparece una lnea que divide el documento en dos. El documento de partida era uno nuevo. En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco padre (mainFrame). Muestra el panel de Marcos para ubicar cual de ellos es el Padre. 6.- En el marco de la izquierda escribe el texto Men, y en renglones inferiores inserta un hipervnculo con la barra Insert hacia las pginas Uno, dos y tres del sitio creado anteriormente. Y en el cuadro de dialogo del hipervnculo elige en Target la opcin MainFrame. 7.- Guarda los marcos. Primero debes guardar el conjunto. Al ver la vista previa pedir que se guarden los marcos de que consta el conjunto, es necesario saber cual es cada uno de ellos para dar un nombre apropiado. 8.- Respalda el documento.

Docente. Sergio Roberto Santiago Cruz

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]
SEP 115 CICLO 01-09

Prctica 2c

CREACIN DE FORMULARIOS

OBJETIVO: El alumno creara un formato de formulario, incluyendo objetos del formulario. INSTRUCCIONES: Objetivo de la prctica: Al finalizar la prctica el alumno conocer las ventajas de los Formularios en una pgina Web, as como los procesos y mtodos para la configuracin de estos elementos. Introduccin Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc. Una vez que el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el tratamiento correspondiente. Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programacin, ya sea en VBScript, en JavaScript o en otro lenguaje de programacin, y esto no entra en los objetivos del curso. Elementos del Formulario Los elementos de formulario pueden insertarse en una pgina a travs de la barra Insert, opcin Forms.

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 algunos de los elementos ms usados de esta categora que pueden formar parte de un formulario, as como algunas de sus propiedades. EJERCICIO PRCTICO Disea una pgina Web con formularios utilizando al menos cuatro elementos que se describieron en la prctica. El tema es libre.

Docente. Sergio Roberto Santiago Cruz

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

Prctica 3 ROLLOVERS

INSERCIN DE IMGENES, VIDEOS, SONIDOS Y

OBJETIVO: El alumno crear una pgina en donde insertara las imgenes que funcionaran como mapas de imgenes y rollovers, segn corresponda INSTRUCCIONES: Insertar objetos comunes en la pgina Web Para insertar un objeto, ya sea una imagen, una tabla, una capa, un hipervnculo, etc. Utilizamos la barra Insert y en esta primera parte de la prctica solo utilizaremos la categora de Common.

1.- Abre una pgina nueva y guarda en el sitio que ya existe de las prcticas anteriores llama a esta Objetos. 2.- Para cada uno de los botones de los que consta esta barra, antes de insertar, sin dar clic en l acrcate hasta que aparezca el mensaje del nombre del botn y escribe el nombre, inserta el elemento en la pagina Objetos y describe los elementos del cuadro de dialogo que se muestra en cada caso. Por ejemplo al insertar un hipervnculo (primer botn de la barra aparece el cuadro de dialogo siguiente:

3.- Debes describir cual es la funcin de cada caja de texto Text, Link, Target, Tab Index, Title, Acces Key y los botones. Se recomienda dar clic en el botn de ayuda, en cada cuadro de dialogo. Selecciona cada elemento que insertes en la pgina y observa el inspector de propiedades. Se deber entregar un reporte de cada uno de los botones. Insertar objetos Multimedia en la pgina Web 1.- Realiza las mismas tareas del punto anterior, con la categora de Media Los Comportamientos Los comportamientos son acciones que suceden cuando los usuarios realizan algn evento sobre un objeto, como puede ser mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver permite insertarlos a travs del panel Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo JavaScript para programarlos. Insertando Comportamientos
Docente. Sergio Roberto Santiago Cruz

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

Abre el panel Behaviors (Comportamientos) a travs del men Window. Tambin pulsando mays.+F4. En este panel hay que desplegar el botn pulsando sobre l, y en Show events for para elegir una versin de la lista de navegadores. Algunos comportamientos no funcionan para algunos navegadores, por lo que dependiendo del navegador elegido aparecern unos u otros comportamientos posibles. Existen comportamientos que funcionan en Internet Explorer pero no en Netscape. Debido a que la mayora de usuarios utiliza Internet Explorer, vamos a seleccionar este navegador. Puedes seleccionar IE 6.0 que es el instalado en los equipos de cmputo. Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se desee insertar algn comportamiento. Cuando ya hay establecido algn navegador, ya se pueden insertar comportamientos. Selecciona el objeto sobre el que se ha de aplicar el comportamiento, como puede ser una imagen, un fragmento de texto, etc. Utiliza una pagina nueva en el sitio y llama comportamiento Segn el elemento sobre el que se desee aplicar el comportamiento, se podrn elegir unas acciones, mientras que otras no. Aplica tres comportamientos a una imagen y tres comportamientos a un texto, reporta cada uno de los casos. Baja de Internet 4 imgenes de cualquier formato, solo una debe ser gif animado Inserta dos imgenes en una colocaras un mapa de imagen y en la otra ( gif animado) otro mapa de imagen. Con las dos imgenes restantes crea un rollover. Busca un Video y un Sonido y gurdalos. Posteriormente insrtalos en la pgina que creaste.

Docente. Sergio Roberto Santiago Cruz

10

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

Prctica 4

UTILIZACION DE CODIGO HTML

OBJETIVO: El alumno creara una pgina en donde insertar elementos multimedia. INSTRUCCIONES: 1.- Transcribe el siguiente texto en un nuevo documento de Dreamweaver entre las etiquetas de <head> y </head> en la vista de cdigo. <STYLE TYPE=text/css> .cabecera
{

font-size=19px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-align:center;

}

.texto
{

font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-style:italic; color:#FFFFFF; background-color:#000000;

}

</STYLE>

2.- Pasa a la vista de diseo y despliega el panel de Design y observa que en la categora de CSS Styles existen dos estilos llamados cabecera y texto.

Docente. Sergio Roberto Santiago Cruz

11

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

3.- Escribe un texto cualquiera en la pgina en blanco en la vista de diseo y da clic sobre alguno de los estilos. En seguida da nueva mente clic sobre el otro estilo y anota tu observacin La definicin de estilos se puede encerrar entre comentarios (<!-- ... -->), de esta forma los navegadores que no reconozcan la etiqueta <style> la ignorarn. Es importante no incluir dobles comillas en la especificacin de valores de atributos en sintaxis CSS. CSS exige un estricto cumplimiento de sus normas de sintaxis. Asegrate de no omitir ningn punto y coma entre los pares nombre/valor. Si lo haces, se ignorara por completo la definicin de estilo. De igual forma, si accidentalmente se aade un smbolo extrao la definicin ser ignorada. 4.- En el panel CSS Styles, haz clic en el botn New CSS Rule. 5.- En el cuadro de dialogo que se muestra en la opcin Selector Type elige Class, y en el cuadro de dialogo siguiente elige las opciones de tu preferencia anotando las opciones que se deben llenar.

6.- Observa que se ha creado un nuevo estilo con el nombre que elegiste y se puede aplicar al texto de la pgina con un simple clic. 7. Inserta Marquesina ala pgina

Docente. Sergio Roberto Santiago Cruz

12

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

Prctica 5 Y 6 CREACIN DE CAPAS

OBJETIVO: El alumno creara una pgina en donde incluir el manejo de capas. INSTRUCCIONES: En la pgina que acaba de crear el alumno, se insertaran capas y se modificarn sus propiedades ( mltiples capas consecutivas, tamao, moverlas, alinearlas, ajustarlas a la cuadrcula, cambiar el orden de apilamiento, etc.)

El primer paso que tenemos que dar es desarrollar mentalmente un esquema del men que queremos realizar. Haremos un men principal compuesto por 5 partes en posicin horizontal. Crearemos una tabla con 5 celdas y les daremos a cada una de ellas un determinado el tamao de pxel, en nuestro caso 100px - 20px. Demos clic en el icono de capa y dibujaremos una en cualquier lado, seguidamente arrastraremos el smbolo de capa (que determina el lugar donde el programa introducir la lnea de cdigo HTML, que por defecto crear dentro de la etiqueta Body) dentro una de las celdas de la tabla que hemos generado Modificaremos en la ventana propiedades, los campos Iz (izquierda) y Sup (superior) dejndolos en blanco, al hacer esto el programa engancha la capa en la esquina superior izquierda del recipiente en el que se encuentra, en este caso, la celda en la que hemos introducido la capa. Despus daremos un valor a los campos de An (ancho) y Al (alto) En el ejemplo que estamos creando sern 100px y 20px respectivamente, este paso lo tenemos que repetir para cada una de las 5 celdas (en nuestro caso), de las que se compone nuestro men principal

Una vez terminado con este paso procederemos a crear otras capas dentro de las que ya hemos establecido, a estas capas tendremos que darles unos valores de tamao dependiendo de las distintas partes que queramos introducir dependientes de cada men (nosotros daremos 100px - 80px en el primer desplegable, 100px - 140px en el segundo, 100px - 100px en el tercero, 100px - 80px en el cuarto y 100px - 140px en el quinto). Para colocar una capa dentro de otra podemos hacerlo: 1, arrastrando como hemos hecho anteriormente esta nueva capa dentro de la anterior, o 2, presionando la tecla F2 nos aparecer la ventana capas donde podremos ver un esquema de las capas que tenemos en nuestra web, escogiendo una de las capas que aparecen y arrastrndola encima de otra mientras que presionamos la tecla ctrl, introduciremos la capa arrastrada dentro de la que hayamos seleccionado. Estas subcapas que hemos creado, que dependen de las principales, por defecto tienen la propiedad default que deja la capa visible en todo momento y nos viene bien para trabajar, pero antes de darles un comportamiento a estas, cuando tengamos terminado por completo la estructura de nuestro men, deberemos cambiar este tributo default de las capas secundarias (las que se encuentran dentro de las 5 capas principales) por hidden, que las
Docente. Sergio Roberto Santiago Cruz

13

3 de mayo de 2011

[PRACTICAS DE DREAWEAVER]

hace invisibles, dndonos la posibilidad de trabajar con los comportamientos hacindolas aparecer y desaparecer a nuestro gusto. Dentro de estas capas secundarias introduciremos tablas con el nmero de celdas que hayamos calculado con el tamao de cada capa. Una vez hecho esto en todas las capas deberamos colocar las imgenes o las palabras de nuestro men para poder configurar los comportamientos, ya que si no colocamos nada dentro de las capas, estas no se vern cuando aparecen o desaparecen por ser transparentes. Otra solucin es darles un color de fondo.

El ltimo paso para terminar nuestro men ser dar a cada capa un comportamiento. Para eso necesitamos la ventana comportamiento que, si no la tenemos ya a la vista, presionando la tecla F3 aparecer. Para poder jugar con los comportamientos de mostrar u ocultar capa debemos trabajar con un vinculo (estos vnculos sern las imgenes que hemos colocado dentro de las celdas y en su defecto las palabras, para hacer este vinculo introduciremos en el espacio reservado para los vnculos de la ventana propiedades el smbolo # creando as un vnculo en blanco, a continuacin presionaremos el vinculo creado (en la parte inferior de la pgina principal aparecer el smbolo de vnculo <a> en negrita) despus iremos a la ventana comportamiento y presionaremos el smbolo + y pincharemos en Mostrar - Ocultar capas y nos aparecer una ventana con un listado de todas las capas que tenemos creadas, lo que tenemos que hacer es presionar la capa que se tendra que desplegar cuando passemos el ratn por encima del vinculo que estamos modificando y apretar el botn Mostrar y las dems capas pincharlas y ocultarlas de la misma forma que hemos hecho antes pero en este caso apretando el botn de Ocultar. Este paso lo repetiremos para cada una de los cinco vnculos principales de los que se nos desplegarn los correspondientes submens.

Docente. Sergio Roberto Santiago Cruz

14