Documentos de Académico
Documentos de Profesional
Documentos de Cultura
PRACTICAS DE
DREAWEAVER
Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
2
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
Utilizando los cuadros siguientes y en caso necesario dibujando otros, elabore el diagrama de flujo de una
página de un tema específico. 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.
3
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
• 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.
4
Docente. Sergio Roberto Santiago Cruz
SEP 115
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER] CICLO 01-09
DEPARTAMENTO DE BACHILLERATO
ACADEMIA DE INFORMÁTICA
TECNOLOGIAS DE LA INFORMACION III
Práctica 2ª CREACIÓN DE HIPERENLACES
5
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
Objetivo de la práctica: Al finalizar la práctica el alumno conocerá las ventajas del uso
de Tablas y Marcos en una página Web. Así como los procesos y métodos para la
configuración de estos elementos.
Introducción
Todos los objetos se alinean por defecto a la izquierda de las páginas Web, pero gracias a
las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un
bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.
Hoy en día, la mayoría de las páginas Web se basan en tablas, ya que resultan de gran
utilidad al mejorar notablemente las opciones de diseño.
Las tablas están 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
páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la
barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la
funcionalidad, pueden mejorar también la apariencia.
Configuración de tablas en la página Web
Para insertar una tabla, utilizamos la barra Insert en la categoría de Common, o bien en
la misma barra podemos elegir Layout
1.- Abre una página nueva y guarda en el sitio que ya existe de las prácticas 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 página Web
siguiente.
5.- Respalda el documento.
Manejo de Marcos en la página Web
Crear marcos
6
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 categoría de Layout en la barra de herramientas Insert
3.- A través de esta opción puede elegirse el tipo de marco que va a crearse.
4.- Elegimos la opción de Left Frame (marco a la izquierda)
5.- Como puedes ver en la imagen, aparece una línea 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 teníamos 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 hipervínculo con la barra Insert hacia las páginas Uno, dos y tres del sitio creado
anteriormente. Y en el cuadro de dialogo del hipervínculo elige en Target la opción
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.
7
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
SEP 115
CICLO 01-09
Práctica 2c CREACIÓN DE FORMULARIOS
OBJETIVO: El alumno creara un formato de formulario, incluyendo objetos del
formulario.
INSTRUCCIONES:
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 algunos de los elementos más usados de esta categoría que pueden formar
parte de un formulario, así como algunas de sus propiedades.
EJERCICIO PRÁCTICO
Diseña una página Web con formularios utilizando al menos cuatro elementos que se
describieron en la práctica.
El tema es libre.
8
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
1.- Abre una página nueva y guarda en el sitio que ya existe de las prácticas 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 acércate hasta que aparezca el mensaje del nombre del botón 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 hipervínculo (primer
botón de la barra aparece el cuadro de dialogo siguiente:
3.- Debes describir cual es la función de cada caja de texto Text, Link, Target, Tab Index,
Title, Acces Key y los botones. Se recomienda dar clic en el botón de ayuda, en cada
cuadro de dialogo.
Selecciona cada elemento que insertes en la página y observa el inspector de
propiedades.
Se deberá entregar un reporte de cada uno de los botones.
Insertar objetos Multimedia en la página Web
1.- Realiza las mismas tareas del punto anterior, con la categoría de Media
Los Comportamientos
Los comportamientos son acciones que suceden cuando los usuarios realizan algún
evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre
un texto, hacer doble clic sobre un mapa de imagen, etc.
Los comportamientos no existen como código HTML, se programan en JavaScript.
Dreamweaver permite insertarlos a través del panel Comportamientos, por lo que no es
necesario escribir ninguna línea de código JavaScript para programarlos.
Insertando Comportamientos
9
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
• Baja de Internet 4 imágenes de cualquier formato, solo una debe ser gif animado
• Inserta dos imágenes en una colocaras un mapa de imagen y en la otra ( gif
animado) otro mapa de imagen.
• Con las dos imágenes restantes crea un rollover.
• Busca un Video y un Sonido y guárdalos.
• Posteriormente insértalos en la página que creaste.
10
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
2.- Pasa a la vista de diseño y despliega el panel de Design y observa que en la categoría
de CSS Styles existen dos estilos llamados cabecera y texto.
11
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
3.- Escribe un texto cualquiera en la página en blanco en la vista de diseño y da clic sobre
alguno de los estilos. En seguida da nueva mente clic sobre el otro estilo y anota tu
observación
La definición de estilos se puede encerrar entre comentarios (<!-- ... -->), de esta forma los
navegadores que no reconozcan la etiqueta <style> la ignorarán.
Es importante no incluir dobles comillas en la especificación de valores de atributos en
sintaxis CSS.
CSS exige un estricto cumplimiento de sus normas de sintaxis. Asegúrate de no omitir
ningún punto y coma entre los pares nombre/valor. Si lo haces, se ignorara por completo
la definición de estilo. De igual forma, si accidentalmente se añade un símbolo extraño la
definición será ignorada.
4.- En el panel CSS Styles, haz clic en el botón New CSS Rule.
5.- En el cuadro de dialogo que se muestra en la opción 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 página con un simple clic.
12
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
• 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 posición horizontal.
• Crearemos una tabla con 5 celdas y les daremos a cada una de ellas un determinado el
tamaño de píxel, en nuestro caso 100px - 20px.
• Demos clic en el icono de capa y dibujaremos una en cualquier lado, seguidamente
arrastraremos el símbolo de capa (que determina el lugar donde el programa
introducirá la línea de código 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)
dejándolos 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.
• Después daremos un valor a los campos de “An” (ancho) y “Al” (alto) En el ejemplo que
estamos creando serán 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 tamaño 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 arrastrándola 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
13
Docente. Sergio Roberto Santiago Cruz
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
• 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 vínculos serán las imágenes que
hemos colocado dentro de las celdas y en su defecto las palabras, para hacer
este vinculo introduciremos en el espacio reservado para los vínculos de la
ventana propiedades el símbolo “#” creando así un vínculo en blanco, a
continuación presionaremos el vinculo creado (en la parte inferior de la página
principal aparecerá el símbolo de vínculo “<a>” en negrita) después iremos a
la ventana comportamiento y presionaremos el símbolo “+” 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 tendría que desplegar cuando pasásemos el ratón por encima del
vinculo que estamos modificando y apretar el botón “Mostrar” y las demás
capas pincharlas y ocultarlas de la misma forma que hemos hecho antes pero
en este caso apretando el botón de “Ocultar”.
• Este paso lo repetiremos para cada una de los cinco vínculos principales de los
que se nos desplegarán los correspondientes submenús.
14
Docente. Sergio Roberto Santiago Cruz