Manual Aplicativos Web I

ndice
Presentacin . 3 3
Modulo A
Semana 1 .. 4 4
Semana 2 .. 24
29
Semana 3 .. 47
52
Semana 4 .. 72
82
Semana 5 .. 85
96
Semana 6 .. 128
98
Semana 7 ..111
151
Semana 8 ..127
167
Semana 9 ..140
180
Modulo B
Semana 1 ..150
190
Semana 2 ..166
209
Semana 3 ..180
223
Semana 4 ..188
228
Semana 5 ..205
241
Semana 6 ..216
255
Semana 7 ..229
268
Semana 8 ..243
282
Semana 9 ..258
297
Bibliografa: ...267
306
APLICATIVOS WEB I 2
PRESENTACIN
Esta gua didctica es un material de ayuda institucional, perteneciente a las

especialidades de computacin, Ingeniera de Software e Ingeniera de Redes
y Comunicaciones tiene por finalidad proporcionar los conocimientos de diseo
y publicacin de sitios web estticos y dinmicos en Internet.
La Organizacin SISE, lder en la enseanza tecnolgica a nivel superior,

promueve la elaboracin de estos materiales de aprendizaje, en concordancia a
las actuales exigencias tecnolgicas de nuestros tiempos, esperando que sirvan
de ayuda para facilitar el proceso de aprendizaje de los estudiantes.
Esta gua se divide en 2 mdulos y cada una de ellas en 9 semanas. La primera

parte sienta las bases del diseo web, permitiendo conocer el manejo de
programas de edicin vectorial, de tratamiento de imgenes y maquetacin web,
brindando los conocimientos primarios tan necesarios al manejar las
herramientas de esta especialidad. Durante el segundo mdulo se estudia el uso
de un software bastante usado por la mayora de diseadores web, que es
Adobe Dreamweaver, llegando hasta conocer cmo trabajar con bases de datos
MySQL y usar los datos mediante PHP.
APLICATIVOS WEB I 3
Contenido
- Introduccin a Corel Draw X5.
- Entorno de trabajo de Corel Draw X5.
- Uso de Herramientas Bsicas: Elipses, Rectngulos, Polgonos.
- Organizar objetos: Seleccionar, Agrupar y Desagrupar, Ordenar, Alinear y distribuir.
- Dar forma: soldar, intersectar y recortar.
- Transformaciones bsicas: escala, reflejo, inclinacin, posicin, rotacin y tamao.
- Herramientas de dibujo vectorial: curvas, manejo de nodos, convertir a curvas.
INTRODUCCIN A COREL DRAW X5

CorelDraw es el ms completo programa de diseo grfico e ilustracin, este programa trae
rpidas herramientas de ilustracin, contiene efectos especiales fciles de usar, que lo
convierten en el programa ideal para la creacin de cualquier proyecto de diseo.
Con CorelDraw podr realizar infinidad de piezas publicitarias, logotipos empaques, etc.
Si crea un archivo en Corel que contiene texto, con el archivo CDR se guardar una referencia al
nombre de la fuente. Esto permite a Corel abrir el archivo de forma precisa en el futuro al
visualizar el texto en el tipo de letra apropiado.
Qu es un grfico vectorial?
Es una composicin de formas (lneas, elipses,
rectngulos, curvas y trayectorias complejas)
matemticas. Este tipo de imgenes codificadas
matemticamente no se deforman al sufrir un
cambio de tamao, en consecuencia no pierde su
calidad.
Cmo es lgico, no necesitamos saber frmulas
matemticas complejas, el programa lo hace por
nosotros.
APLICATIVOS WEB I 4
Modos de Color
El modo de color de una imagen digital determinar el mtodo especfico (el Modelo de color)
que Corel Draw usar para colorear los pxeles en la imagen.
Cada Modo de color se diferencia (entre otras muchas cosas) en los canales de color que
utilizan para crear la informacin de colores de la imagen. Segn sea su "mtodo de creacin de
colores" podrn llegar a representar ms o menos colores, es decir, su espacio de color ser
ms o menos grande.
- (Red, Green, Blue) En castellano a veces se denomina RVA (Rojo, Verde, Azul).
- Es el Modo de color comn en todos los dispositivos de entrada y visualizacin de

imagen (escneres, vdeo, cmaras, monitores, proyectores, etc.).
- Esto es porque este modo de color produce la representacin en pantalla ms precisa

de los colores de las imgenes.
- Cian, Magenta, Amarillo (Yellow) y Negro (de Keay, color clave), los colores usados en
la impresin.
- Al usar 4 canales de color (uno ms que el RGB) es el modo de color ms pesado. Las
imgenes en CMYK pesan ms que las imgenes en RGB. El programa realiza sus
operaciones ms lentamente en este modo porque tiene cuatro canales que calcular.
- No es el Modo de color que usa el monitor para crear los colores, por lo que es muy
posible que haya colores vistos en RGB que sean irreproducibles en Modo CMYK (con
las tintas de la impresora).
Novedades de la versin X5
- Este programa le ofrece una riqueza absoluta de contenido que le inspirar y le servir
de punto de partida para sus propios diseos. Con una gama de imgenes clipart, fotos,
rellenos de mapa de bits y vectoriales en color, plantillas personalizables y fuentes, la
creatividad no tiene lmite. CorelDRAW tambin incluye preestablecidos y plumillas de
medios artsticos, mientras que Corel PHOTO-PAINT ofrece nuevos pinceles y plumillas.
APLICATIVOS WEB I 5
- Corel Connect. Este navegador a pantalla completa le permite hojear el contenido
digital de la solucin y realizar bsquedas en su sistema o en la red local para encontrar
rpidamente el complemento perfecto para cualquier diseo. Puede buscar contenido
por categora o utilizando cualquier palabra clave. Esta prctica utilidad tambin est
disponible como ventana acoplable en CorelDRAW y Corel PHOTO-PAINT. Por otro
lado, tambin le permite almacenar una coleccin de contenido en la bandeja,
completamente sincronizada entre el navegador y las ventanas acoplables para facilitar
el acceso rpido al contenido de sus proyectos.
- Tutoriales en vdeo: Los tutoriales en vdeo proporcionan una forma rpida y entretenida
de obtener el mximo rendimiento de la solucin. CorelDRAW Graphics Suite X5
proporciona una nueva utilidad que le facilitar la visualizacin de tutoriales sin tener que
buscarlos.
- Ayuda emergente: El formato y el contenido de la ayuda emergente se han mejorado

para facilitar su lectura y proporcionar ms informacin. Al colocar el puntero sobre un
icono o botn, aparecer una ayuda emergente que describe la herramienta y su
propsito.
APLICATIVOS WEB I 6
- Cuadros de dilogo Crear documento/imagen nuevo/a: CorelDRAW X5 introduce un
cuadro de dilogo Crear nuevo documento que proporciona una seleccin de
preestablecidos para tamao de pgina, resolucin del documento, modo de
previsualizacin, modo de color y perfil de color. Para nuevos usuarios, el rea
Descripcin clarifica los controles y opciones de configuracin disponibles.
- Corel PowerTRACE X5: Puede convertir mapas de bits en grficos vectoriales editables
para obtener curvas ms suaves y resultados ms precisos. Esta versin de Corel
PowerTRACE produce los mejores resultados posibles.
- Integracin VSTA: Para aumentar la flexibilidad de automatizacin, ahora puede utilizar

Microsoft Visual Studio Tools for Applications para crear adiciones dinmicas.
- Otras herramientas contenidas en la nueva versin sern detalladas ms adelante.
APLICATIVOS WEB I 7
Cmo iniciar el programa?
1era Forma (clsica)
A travs del Men Inicio.
2da Forma
Cargando el ejecutable del programa (Men Inicio > Ejecutar: CORELDRW ).
APLICATIVOS WEB I 8
Una vez cargado el programa, se muestra una ventana que permite:
Crear un nuevo documento, abrir uno existente, ver la ayuda, tutoriales, etc. Al iniciar se abre un
cuadro de dialogo que permite configurar los valores de pgina, modo de color, resolucin, etc.
APLICATIVOS WEB I 9
ENTORNO DE COREL DRAW X5
1
2
3
4
5 7 8 9
10
11
1. Barra de Ttulo
2. Barra de Men
3. Barra Estndar de Herramientas
4. Barra de Propiedades
5. Cuadro de Herramientas
6. Reglas (Horizontal y Vertical)
7. Mesa de Trabajo
8. Pgina de Dibujo
9. Paleta de Colores
10. Explorador de pginas
11. Barra de Estado
Las propiedades que se observan en la parte superior corresponden a las del Documento, por
ejemplo:
Tamao del Ancho y alto Orientacin Vertical y Establecer tamao y orientacin

Documento horizontal predeterminados actuales
APLICATIVOS WEB I 10
Establecer unidades de medida Valor de desplazamiento Posicin de duplicados
Cmo puedo personalizar mi Entorno de Trabajo?

- Si requiere visualizar ms filas de colores que las que pueda mostrarse en la Paleta de
Colores: Men Herramientas > Personalizacin > Paleta de Colores
Establecer el nmero de filas (por ejemplo en 3).
- O tambin, desde el botn de control que se halla en la Paleta de Colores.
HERRAMIENTAS BASICAS
1. Herramienta Rectngulo
- Al trazar un rectngulo cualquiera sobre el documento podr observar el puntero activo.
Observar la forma del puntero. Ahora activar la

Herramienta Seleccin
o tambin pulse la Barra Espaciadora.
Modificadores de tamao
Modificadores de rotacin
Modificadores de inclinacin
Centro de Giro
- Pulsando sobre las flechas de las esquinas y moviendo el ratn podremos girar el objeto,
o cambiar el centro del giro del objeto.
Mover el centro Inclinar

de Giro y rotar
- Trazar un rectngulo pulsando la tecla CTRL => se dibuja un CUADRADO.

- Trazar un rectngulo pulsando la tecla SHIFT => se dibuja desde su centro.
- En las propiedades se puede modificar el ancho y alto de la figura seleccionada. (60 mm
de ancho y 30 mm de alto).
- Se puede aplicar redondez de esquina, festoneado o biselado. (Probar con 10 mm.).
- El icono en forma de candado permite igualar la medida de las esquinas.
- Adems, se puede ampliar el grosor del contorno.
Ejercicio Prctico.
- Trazar un rectngulo de la siguiente forma.
- Rotar en 335 grados. Duplicar pulsando la tecla + del teclado numrico. Luego hacer
clic sobre REFLEJAR HORIZONTALMENTE.
- Para establecer un color de relleno a la figura de un clic a cualquier color.

- Si desea establecer un color de contorno, de un clic derecho a cualquier color.
- Si desea establecer SIN COLOR, elija la muestra X.
- Puede dar un clic sostenido a un color para mostrar ms tonalidades de un color.
Sin color
Contorno Azul Contorno Azul

Relleno Rojo Relleno Verde
Clic sostenido al color
2. Herramienta Elipse
- Al trazar una elipse, al igual que con el rectngulo, se podr cambiar de tamao, rotar e
inclinar.
- La elipse podr dibujarse como forma cerrada (1), en forma de sector circular (2) o
como arco (3), de acuerdo a los ngulos inicial y final (4).
1 2 3 4
Ejemplo.
Dibujar la siguiente figura:
3. Herramienta Polgono
- Trazar un polgono, luego cambiar el nmero de puntas o lados del polgono.
- Si pulsa la Herramienta Forma o pulsa la tecla F10, observar el cambio del

puntero a una cabeza de flecha. Acercar a los nodos y arrastrar hacia adentro o hacia
afuera.
a. Herramienta Estrella
Trazar una estrella de 5 puntas y
53 grados de perfilado.
b. Herramienta Estrella Compleja
Trazar una estrella compleja de 12
puntas y 3 grados de perfilado.
c. Herramienta Papel Grfico

Antes de trazar la cuadrcula o papel
grfico, habr que indicar el nmero
de filas y columnas.
d. Herramienta Espiral
Se establece el nmero de vueltas
de la espiral, y el tipo: simtrica o
logartmica.
4. Herramienta Zoom y Mano
- La Herramienta Zoom permite ampliar o alejar una imagen.

- La Herramienta Mano permite desplazarse por una imagen.
Pulsando la tecla F2 para acercar, o mover la Pulsando la tecla SHIFT para alejar, o
rueda central del mouse hacia ARRIBA. mover la rueda central del mouse hacia
ABAJO.
- Trazando un rea sobre una determinada zona.
- Realiza un conjunto de figuras como se muestra:
- Pulsar F3, y observar cmo se aleja.
- Pulsar F4, para observar todo el rea de

trabajo.
- Pulsar SHIFT + F4, para observar slo las

figuras contenidas dentro de la pgina.
- Pulsar F9, para hacer una previsualizacin

a pantalla completa.
5. Herramienta Formas Bsicas
- Formas Bsicas - Formas de Flecha
- Formas de Diagrama de Flujo - Formas de Llamada
- Formas de Orla
Ejercicios.
ORGANIZACIN DE OBJETOS
Para estudiar estos temas, se sugiere que dibuje algunos objetos sobre su documento.
1. Seleccionar objetos
- Para seleccionar objetos pulsar la Barra

Espaciadora o activar la herramienta
Seleccin luego trazar un rea que
contenga a los objetos (ejm: seleccione

las dos estrellas de la zona superior, y
cambiar el color de relleno a rojo).
- Seleccionar pulsando la tecla SHIFT y

haciendo clic sobre cada figura (ejm:
seleccionar las cuatro figuras de la zona
inferior, y cambiar el color de relleno a
verde).
- Seleccionar pulsando la tecla ALT y

trazando un rea que toque a las figuras
que desee seleccionar (ejem: seleccionar
las tres estrellas).
2. Agrupar/Desagrupar
- Seleccionar los objetos que se agruparan, luego ir al Men Organizar > Agrupar (o
pulsando CTRL + G).
- Ahora los objetos se comportan como uno solo (se pueden mover, cambiar de color de
contorno, relleno, etc.).
- Para desagruparlos, ir al Men Organizar > Desagrupar (o pulsando CTRL + U).
3. Orden
- Las opciones de orden (colocar una figura detrs de otra, o enviarla hacia atrs de todo,
delante de una, o hacia delante de todo), se encuentran en el Men Organizar > Orden
- De manera ms rpida usar los siguientes atajos:

SHIFT + REPAG Mover hacia delante de todo (hacia delante de la capa).
SHIFT + AVPAG Mover hacia atrs de todo (hacia atrs de la capa).
CTRL + REPAG Mover hacia delante de un objeto (avanzar una).
CTRL + AVPAG Mover hacia atrs de un objeto (retroceder una).
4. Alinear y distribuir
- Las opciones de alineacin y distribucin (colocar una figura detrs de otra, o enviarla
hacia atrs de todo, delante de una, o hacia delante de todo), se encuentran en el Men
Organizar > Orden
Pulsar T (Alineacin Superior) Pulsar B (Alineacin Inferior)
Pulsar L (Alineacin Izquierda) Pulsar R (Alineacin Derecha)
Pulsar E (Centrar Horizontal) Pulsar C (Centrar Vertical)
5. Dar forma
- Estas acciones permiten unir o soldar, intersectar o recortar zonas pertenecientes a
formas vectoriales.
- Seleccionar las figuras, y luego ir al Men Organizar > Dar forma, o en caso contrario
en la Barra Estndar de Herramientas.
Ejemplo
- Dibujar dos crculos de dimetro 50, alinearlos de la

siguiente forma, y luego seleccionarlos.
- Aplicar INTERSECTAR, y luego mover.
- Pulsar la tecla + para duplicar, luego mover, y cambiar el centro de giro.
- Rotar, duplicar y reflejar horizontalmente.
- Seleccionar todo, y agrupar, luego rellenar de color negro y luego dibujar un rectngulo
de 3 mm de altura.
- D un clic al documento , y en las

propiedades, establecer el valor de
POSICION DE DUPLICADOS en:
- Seleccione el rectngulo y pulse CTRL + D varias veces y RECORTAR.
- Seleccionar los rectngulos y eliminarlos. La figura debe quedar as:
- Activar la Herramienta Texto (o pulsar la tecla F8) y digitar: adidas
Ejercicios
HERRAMIENTAS DE DIBUJO
A continuacin pasaremos a estudiar las herramientas de dibujo usadas para crear diferentes
tipos de formas libres.
- La Herramienta Mano Alzada permite dibujar lneas a mano alzada como si estuviera
haciendo esbozos en un cuaderno. A la hora de dibujar lneas o segmentos rectos, los
puede restringir a lneas rectas verticales u horizontales.
- La Herramienta Bezier y la herramienta Pluma permiten crear lneas rectas y curvas.

Adicionalmente, la herramienta Pluma permite agregar y eliminar nodos.
- La Herramienta B-Spline es nueva en esta versin. Un B-spline es normalmente una

lnea curva, continua y suave. Los B-splines tocan los puntos de control primero y ltimo
y se puede tirar de ellos mediante los puntos intermedios. A diferencia de las curvas
Bzier, los puntos de control no le permiten especificar los puntos por los que pasa una
curva al alinear una curva con otros elementos de dibujo.
- La Herramienta Medios Artsticos permite dibujar trazos de tipo Predefinidos (lineales),
Pinceles, Diseminadores, Pluma y Presin. Cada categora posee diferentes modelos de
trazos o patrones.
Tipo Categora Patrn Modelo
Smbolo Flecha
Comida Frutas
- La Herramienta Forma permite seleccionar los

nodos y manipularlos, adems de aadir o eliminar
mas nodos.
Nodo
Nodo seleccionado
Hacer doble clic en un segmento Hacer doble clic en un nodo para

para crear un nodo eliminarlo
- Los nodos seleccionados se pueden convertir en generadores de curva.
Manejadores de curva
- Los nodos pueden ser de tres tipos:
NODOS ASIMETRICOS
Los manejadores pueden tener
diferente amplitud y direccin.
NODOS SIMETRICOS
Los manejadores pueden tener
diferente amplitud y son opuestos.
NODOS UNIFORMES
Los manejadores tienen igual
amplitud y son opuestos.
CONVERTIR A LINEA
Los nodos seleccionados que sean
de tipo curvo, son cambiados a
lineales.
Ejemplo
- Trazar la siguiente figura usando la herramienta bezier.
- Activar la herramienta Forma y seleccionar todos los nodos, y convertirlos a curva.
Ejercicios.
Contenido
- Herramientas de Relleno: Uniforme, Degradado, Patrn y Textura.

- Texto Artstico y de Prrafo. Adaptar texto a trayectos. Importar.
- Herramientas. Interactivas: Mezcla, Silueta, Envoltura, Extrusin, Sombra.
- Exportar a JPG, GIF.
HERRAMIENTAS DE RELLENO
- El Relleno Uniforme se puede aplicar directamente al seleccionar los objetos y

haciendo un clic sobre un color de la paleta de colores, o haciendo clic sobre la
herramienta relleno uniforme.
- En la Ficha MODELOS, elegir el modelo CMYK (1) o RGB, luego el color en (2) y el tono
que deseas en la barra de colores (3). Al mover el mouse fjate a la derecha en el cuadro
componentes (4 y 5), y vers que van variando los valores.
1
4 5
2
3
- El Relleno Degradado se puede aplicar seleccionando los objetos y estableciendo el

tipo (lineal, radial, cuadrado, etc.), la mezcla de colores (a dos colores o
personalizado), el ngulo del degradado y el punto medio.
3
1
- Los tipos de degradado pueden ser:
Lineal Radial Cnico Cuadrado
- Si selecciona la mezcla personalizada, se pueden agregar ms colores al degradado (5).
- El Relleno de Patrn permite establecer una imagen como forma de relleno que se
repite varias veces.
- Se puede establecer a 2 colores (1), a color (2) y forma de mapa de bits (3), en la zona
inferior (4) se pueden establecer los valores de tamao del patrn, inclinacin, giro, etc.
2
1
- Un Relleno de Textura es un tipo de relleno generado aleatoriamente y que puede
usarse para dar un aspecto natural a los objetos. CorelDRAW proporciona texturas
preestablecidas y cada textura tiene un conjunto de opciones que se pueden cambiar
- Un Relleno PostScript se crean utilizando el lenguaje PostScript. Dado que algunas

texturas son muy complejas, los objetos de gran tamao que contienen rellenos de
textura PostScript pueden tardar en imprimirse o actualizarse en la pantalla. En funcin
del modo de visualizacin que ests utilizando, es posible que aparezcan las letras "PS"
en lugar del relleno. Al aplicar un relleno de textura PostScript pueden cambiarse varios
parmetros, como el tamao, la anchura de lnea y la cantidad de gris que aparecer en
el primer plano y en el fondo de la textura.
HERRAMIENTAS DE CONTORNO
- En el Cuadro de Dilogo Pluma de Contorno
HERRAMIENTAS DE TEXTO
- Para trabajar con textos artsticos, solo es necesario activar la herramienta o pulsar la
tecla F8 y dar un clic en el documento, y escribir.
- Si realiza un arrastre formando un rea, lo que trabajar ser un texto de prrafo.
Texto Artstico Texto de Prrafo
Qu podemos trabajar con los Textos Artsticos?

- Cambiar el nivel de los caracteres y el espaciado.
Activando la herramienta Forma,

y moviendo sobre los nodos de
cada carcter.
Activando la herramienta Forma,

y moviendo sobre el nodo
separador.
- Convertir a curvas.
Seleccionar el texto, y pulsar

CTRL + Q, el texto pierde sus
propiedades y usando la
herramienta Forma, se puede
distorsionar los nodos.
- Adaptar a trayectos.
- Trazar cualquier lnea o trayecto

- Seleccionar el texto
- Ir al Men Texto > Adaptar texto

a trayecto
- Acercar el puntero hacia la

lnea hasta encontrar la posicin
adecuada , y por ltimo dar un
clic.
Ejercicios.
Donde puedo encontrar ms tipos de fuentes para trabajar?
En Internet se pueden encontrar varios sitios en donde podremos encontrar tipos de
fuente gratis o de paga, algunos de los ms visitados son: www.1001fonts.com ,
www.fontsreactor.com.
- Ingresar a www.1001fonts.com
Seleccionar la categora de la
fuente que desea buscar
- Para el ejemplo, seleccionaremos la categora MOVIES (pelculas), y buscaremos la

fuente correspondiente a TERMINATOR. Para descargar elegir Win TrueType.
- El archivo descargado se debe descomprimir usando WinZip o WinRar, y buscar el

archivo TTF o de fuente, y copiarlo a la carpeta Fonts en Windows (Panel de
Control > Fuentes).
Y los textos de prrafo?
En los textos de prrafo podemos aplicar todos algunos de los tipos de formatos que son
conocidos en un procesador de textos, tales como:
Indica que el texto contina.
Indica que el viene de otra zona
1
3
Indica la direccin del texto
- Aplicar columnas (Men Texto > Columnas)
- Aplicar capitular o Letra Capital (Men Texto > Capitular)
- Aplicar marcas o vietas (Men Texto > Marcas)
- Seleccionando cualquier forma, y activar la propiedad AJUSTAR TEXTO A PARRAFO,

luego elegir el tipo de ajuste y desplazamiento.
Ejercicios.
HERRAMIENTAS INTERACTIVAS
1. Herramienta Mezcla Interactiva

- Permite mezclar dos objetos. Para aplicarla debemos seleccionar los dos objetos a
mezclar, luego activar la herramienta y desplazar el primer objeto sobre el segundo.
Nmero de etapas
- Se puede hacer que la mezcla siga un trayecto, para ello, se puede trazar una lnea
cualquiera (curva, elipse, etc.), y luego seleccionar como nuevo trayecto.
2
1
- Las mezclas pueden ser generadas alrededor de un trayecto o girar de acuerdo a un eje.
1 2 3
2. Herramienta Silueta Interactiva

- Para crear lneas concntricas (2) hacia el interior o exterior (1) de un objeto o texto
definido como artstico. Es posible definir una distancia entre silueta y silueta (3) y una
progresin de color en la que un color se mezcle con el siguiente (4).
1 2 3 4
Estrella con color de relleno

amarillo y contorno azul.
3. Herramienta Distorsin Interactiva
- Permite aplicar distorsiones del tipo empujar y tirar (1), cremallera (2) o torbellino (3).
1 2 3
Texto de fuente Arial Black, que se Rectngulo y texto que se aplic la

aplic Empujar y Tirar distorsin Torbellino.
4. Herramienta Sombra Interactiva

- Las sombras simulan el efecto de luz que incide sobre un objeto desde cinco
perspectivas concretas: horizontal, derecha, izquierda, abajo y arriba. Pueden aplicarse
en objetos, textos artsticos y prrafos o imgenes de mapa de bits.
- Desde las propiedades se puede configurar la opacidad (1), fundido (2), direccin (3) y
color de la sombra (4).
1 2 3 4
5. Herramienta Envoltura Interactiva
- Estn formadas por varios nodos que se pueden modificar para dar forma a la envoltura
y el resultado de esta accin es que el objeto cambia de forma.
6. Herramienta Extrusin Interactiva

- Crea un efecto tridimensional en un objeto o texto, generando una profundidad que
simula volumen. Es posible aplicar rellenos a una extrusin y efectos como luminosidad
y modificar el punto de fuga.
Se puede rotar la extrusin.
Color de extrusin amarillo. Color de extrusin de naranja a amarillo.
Se puede activar el uso de Biseles para las Se puede activar el uso de luces e
esquinas. intensidad.
7. Herramienta Transparencia Interactiva

- Cuando se aplica una transparencia a un objeto, los elementos que se encuentran
debajo del mismo se vuelven parcialmente visibles. Es posible obtener efectos
interesantes modificando parmetros en la barra de Propiedades.
- En las propiedades se puede establecer el Tipo (1) y Punto medio de transparencia (2).
1 2
Uniforme Radial
Lineal Cuadrado
Ejercicios.
EFECTOS Y MAPAS DE BITS
1. Power Clip
- Permite incluir una imagen dentro de un objeto.
1. Dibujar una forma cualquiera.

2. Importar una imagen y seleccionarla.
3. Ir al Men Efectos > Power Clip > Situar dentro de contenedor
4. Seleccionar la figura.
- Si quiere modificar el contenido del Power

Clip, de un clic derecho y elegir:
Editar contenido.
- Una vez terminada la edicin, de un clic

Derecho y elegir:
Finalizar la edicin a este nivel.
- Si desea sacar la imagen contenida, de un

clic derecho y elegir:
Extraer contenido.
2. Aadir perspectiva
- Permite aplicar un efecto 3D de alejamiento y acercamiento.
- Ir al Men Efectos > Aadir perspectiva
Ejercicio.
3. Lente
- Al aplicar una lente a un objeto, modificar su apariencia y, lo que es ms importante, la
forma en que se percibe una vez situado tras ella. Se podr elegir entre doce tipos de
lente, que producen resultados distintos, que van desde la alteracin del color (como el
producido por las lentes Mapa de calor, Invertir y Aclarar, por ejemplo) a la distorsin
(como el producido por las lentes Aumentar u Ojo de pez).
- Seleccionar el objeto que ser usado como lente.
- Ir al Men Efectos > Lente.
4. Otros tipos de efectos
- El Men Mapas de Bits contiene diversos tipos de efectos que pueden ser aplicados
sobre imgenes.
- Men Mapa de Bits > Efectos 3D > Rotacin 3D
- Men Mapa de Bits > Efectos 3D > Relieve
- Men Mapa de Bits > Efectos 3D > Plegado de Esquina
- Men Mapa de Bits > Efectos 3D > Perspectiva
- Men Mapa de Bits > Efectos 3D > Esfera
- Men Mapa de Bits > Trazos Artsticos > Cubista
Ejercicios.
Contenido
- Diferencias entre Imgenes Fsicas e Imgenes Digitales.

- Conociendo el Entorno de Adobe Photoshop CS3.
- Herramientas de Seleccin: lazo, lazo poligonal, lazo magntico, varita mgica.
- Montajes. Trabajar con capas.
- Correccin de Imgenes: Herramientas Pincel corrector, Parche, Tampn de Clonar.
- Ajustes de Color. Mascaras.
INTRODUCCIN A ADOBE
PHOTOSHOP CS4
Es un programa de retoque fotogrfico, que perite creacin de efectos, edicin, retoques de
imgenes. Los cuales pueden ser empleados en pginas web, folletos en general y en la edicin
de videos.
Imagen Digital
En nuestra vida cotidiana vemos multitud de imgenes (las fotografas de unas vacaciones,
leyendo una revista, navegando por Internet, etc.). Todas estas imgenes se diferencian
principalmente por el soporte en el que las vemos (dejando aparte las imgenes de televisin o
cine):
Papel u otro objeto fsico: fotografas tradicionales, imgenes impresas en papel de

revistas y folletos...
Pantalla del computador: imgenes digitales.
Pero para ser ms precisos las vamos a diferenciar por aquellos de que se componen:
IMGENES FSICAS
Fotografa tradicional:
La imagen es formada por cristales sensibles a la luz empleados en las emulsiones
fotogrficas. Estos cristales (haluros de plata) se vuelven negros cuando se exponen a la
luz, formando la imagen en el negativo.
Imgenes impresas
Formada por los puntos de tinta de las impresoras (Cian, Magenta, Amarillo y Negro). Cada
punto se denomina DOT.
IMAGEN DIGITAL
Estn formadas por datos, por cdigo binario. Segn sean esos datos se diferencian en:
MAPA DE BITS
Est compuesta por Pxeles. Un PXEL es una unidad de informacin de valores de
color y luminosidad propios. El conjunto de diferentes pxeles componen la imagen total.
IMAGEN VECTORIAL
Est compuesta por Vectores. Un Vector es una ecuacin matemtica que define una forma:
un vrtice, un contorno, un relleno, etc. Varios vectores componen las diferentes formas
poligonales y colores de una imagen vectorial.
El Pxel
Una vez que uno se inicia en el mundo de la imagen digital no hace ms que or hablar del
PXEL ... pxel por aqu, por all... Pero, qu es un pxel?
Pxel es la abreviatura de la expresin inglesa Picture Element (Elemento de Imagen), y es la

unidad ms pequea que encontraremos en las imgenes compuestas por mapa de bits.
Un pxel tiene tres caractersticas distinguibles:
- Forma cuadrada
- Posicin relativa al resto de pxeles de un mapa de bits.
- Profundidad de color (capacidad para almacenar color), que se expresa en bits. Esta
propiedad la veremos ms detenidamente en la siguiente leccin.
Cmo iniciar el programa?

1ra Forma (clsica)
2da Forma
Cargando el ejecutable del programa (Men Inicio > Ejecutar: PHOTOSHOP ).
photoshop
ENTORNO DE ADOBE PHOTOSHOP CS4

1
3 5
1. Barra de Men
2. Barra de Opciones
3. Cuadro de Herramientas
4. Paneles contrados o inactivos.
5. Paneles desplegados o activos.
6. Area de trabajo.
7. Zoom.
NOVEDADES DE LA VERSION CS4
Pintura y composicin en 3D revolucionarias
Pinte directamente sobre modelos en 3D; envuelva formas 3D con imgenes 2D; convierta los
mapas degradados en objetos 3D; aada profundidad a las capas y al texto; obtenga calidad de
impresin con el nuevo motor de representacin de trazado de rayos; y disfrute de las ventajas
que aporta la posibilidad de exportar a los formatos 3D compatibles ms habituales.
Panel de ajustes
Simplifique el ajuste de imgenes accediendo fcilmente a todas las herramientas que necesita
para su ajuste no destructivo, y mejore el color y el tono de sus imgenes. En el nuevo y
dinmico panel de ajustes tambin se incluyen controles de imgenes y una amplia variedad de
ajustes preestablecidos.
Panel de mscaras
Cree y edite mscaras de forma rpida desde el panel de mscaras. Este panel ofrece todas las
herramientas que necesita para crear mscaras basadas en vectores y en pxeles, ajustar la
densidad de las mscaras y el calado editables, as como seleccionar fcilmente objetos no
contiguos y ms.
Fusionado de imgenes automtico
Cree fcilmente una sola imagen a partir de una serie de imgenes con puntos focales diferentes
mediante el comando Fusionar capas automticamente, que permite fusionar el color y el
sombreado, aumenta la profundidad de campo y corrige automticamente la distorsin de las
vietas y las lentes.
Alineacin automtica de capas

Cree composiciones ms precisas con el comando mejorado Alinear capas automticamente.
Mueva, gire o deforme las capas para alinearlas de manera ms precisa que nunca. O utilice la
alineacin esfrica para crear impresionantes panoramas.
Profundidad de campo ampliada

Combine varias imgenes de diferente exposicin, color y punto focal (con opciones para
conservar los tonos y los colores) en una sola imagen de color corregido.
Opciones de impresin ms potentes

Consiga magnficas impresiones con una administracin de color superior, mayor integracin
con modelos de impresoras lderes en el mercado y capacidad para previsualizar reas de la
imagen con colores que se encuentran fuera de la gama. La compatibilidad con la impresin de
16 bits de Mac OS ofrece una mayor profundidad de color y claridad.
Integracin con otro software de Adobe
Sea ms productivo con la integracin mejorada entre Photoshop Extended y otras aplicaciones
de Adobe de las que depende, incluido el software Adobe After Effects, Adobe Premiere Pro
y Adobe Flash Professional.
Flujo de trabajo mejorado de Adobe Photoshop Lightroom
Seleccione varias fotos en Adobe PhotoShop

Lightroom (se vende por separado) y bralas
automticamente en PhotoShop CS4 para fundirlas en
un panorama, una fotografa High Dynamic Range
(HDR) o un documento de PhotoShop de varias capas.
Y, por ltimo, vuelva sin mayor complicacin a
Lightroom.
Edicin de objetos 3D y propiedades
Edite, mejore y manipule las imgenes 3D en una interfaz optimizada sin cuadros de dilogo.
Ajuste la iluminacin, las mallas y los materiales. Oriente los objetos fcilmente y coloque la
cmara utilizando ejes 3D y un plano de tierra.
Rotacin fluida del lienzo
Ahora, slo tendr que hacer clic y, de este modo, se girar el lienzo sin problemas para verlo
sin distorsiones desde cualquier ngulo. Se acab el torcer la cabeza mientras pinta.
Zoom y acercamiento mejorados
Vaya fcilmente a cualquier zona de la imagen con las nuevas funciones de zoom y
acercamiento, que proporcionan unos resultados excelentes. Mantenga la claridad mientras
ampla a pxeles individuales y edite fcilmente con el mximo aumento gracias a la nueva
cuadrcula de pxeles.
Aplicacin de escala basada en el contenido
Utilice la novedosa y revolucionaria funcin de

aplicacin de escala basada en el contenido para
recomponer automticamente una imagen a medida que
cambia su tamao, conservando las reas vitales de
forma inteligente a medida que la imagen se adapta a las
nuevas dimensiones. Consiga la imagen perfecta en un
paso sin desperdiciar tiempo en recortar y retocar.
Edicin de grficos en movimiento mejorados
Edite grficos en movimiento de forma ms eficaz con los nuevos mtodos abreviados de una
sola tecla; sincronice los efectos visuales con puntos especficos de la pista de audio con los
nuevos controles de sincronizacin; y convierta cualquier objeto 3D en una zona de visualizacin
de vdeo.
Procesamiento mejorado de imgenes RAW
Disfrute de una calidad de conversin superior

mientras procesa imgenes RAW con el plugin de
Adobe Photoshop Camera Raw 5, lder del sector, que
ahora ofrece correcciones en otros idiomas,
restauracin de las vietas despus de recortarlas,
procesamiento de TIFF y JPEG, y es compatible con
ms de 190 modelos de cmaras.
La correccin del color lder del sector

Disfrute de la correccin de color notablemente mejorada con las herramientas rediseadas de
sobreexposicin, subexposicin y esponja, que ahora conservan los detalles del color y del tono
de forma inteligente.
ACCIONES BASICAS
1. Crear una nueva imagen
- Para crear una nueva imagen de 800 pixeles de ancho y 600 pixeles de alto,
podemos ir al Men Archivo > Nuevo o pulsar CTRL + N
2. Cambiar el color frontal y pintar el lienzo

- Seleccionar el color frontal celeste (#88c5e8). En el cuadro de Herramientas,
dirjase a color frontal y d un clic.
Invertir colores
(pulsar la tecla X)
Colores por defecto Color Frontal

(pulsar la tecla D)
Color de Fondo
Seleccione el color (1), el nivel (2) o escriba el valor hexadecimal del color (3).
- Para rellenar con el color seleccionado un rea seleccionada, o en este caso, el

lienzo, pulsar ALT + BACKSPACE.
3. Abrir una imagen y manejar el Zoom
- Para abrir una imagen dirjase al Men Archivo > Abrir, o pulsar CTRL + O. Abrir
la imagen auto.jpg
Si tiene activa la ventana Navegador, puede controlar el Zoom (1).
- Tambin puede controlar el zoom de la siguiente manera:
CTRL + -
Alejar o zoom
negativo
CTRL + +
Acercar o zoom
positivo
CTRL + 0
Ver todo
Mano
HERRAMIENTAS DE SELECCION
- Activar la Herramienta LAZO, con las opciones Desvanecer en 0 px, y activar suavizar.
- Trazar alrededor del auto haciendo clic sostenido. Al terminar debe observarse una lnea
punteada que indica el rea seleccionada. Si comete algn error y desea eliminar la
seleccin, pulsar CTRL + D.
- Al realizar la seleccin se cometieron dos errores:
- Para AADIR un rea seleccionada (1), usar la herramienta lazo pulsando SHIFT.
- Para QUITAR un rea seleccionada (2), usar la herramienta lazo pulsando ALT.
- Copiar usando CTRL + C, activar la nueva imagen de fondo celeste que cre
inicialmente, y pguelo usando CTRL + V.
Observar la creacin de una segunda capa.
- Abrir la imagen auto02.jpg, y utilice la Herramienta Lazo Poligonal con una
desvanesencia de 8 pixeles.
- Cpielo hacia la imagen original.
- Pulse la tecla V para activar la Herramienta Mover y asegrese que este activa
la opcin Seleccionar automticamente, de lo contrario, tendr que activar cada capa
para poder mover un objeto.
- Elija el auto B y pulse CTRL + T para aplicar una TRANSFORMACION LIBRE. Con esta
opcin se podr cambiar de tamao, rotar e inclinar un objeto.
- Aumente ligeramente el tamao del auto, y luego elegir Voltear Horizontal del men
contextual.
- Cambiar el nombre de las capas haciendo doble clic. Luego mover la Capa1 por encima
de la Capa2.
- Abrir la imagen logo.jpg y activar la Herramienta Varita Mgica. Establecer una
tolerancia de 10 pixeles y hacer clic sobre el fondo de color blanco. Luego invertir la
seleccin pulsando CTRL + SHIFT + I. Luego copiar y pegar sobre la imagen original.
- Completar.
- Pulsar CTRL + J para duplicar la capa, y establecer los siguientes nombres:
- Hacer CTRL + clic sobre la miniatura de la capa RESPLANDOR, para que se
seleccione los objetos de la capa, luego ir al Men Seleccin > Modificar > Expandir:
20 pixeles, nuevamente ir al Men Seleccin > Modificar > Suavizar: 10 pixeles.
- Crear una nueva capa de nombre CUADROS. Activar la Herramienta MARCO

RECTANGULAR o pulse la tecla M, y trazar algunas zonas rectangulares (1 y 2), y
pulsando SHIFT activar MARCO FILA UNICA (3 y 4).
- Pulsar SHIFT + BACKSPACE para establecer un relleno personalizado, en donde podr
elegir entre el color frontal o un motivo.
Usar MOTIVO y elegir el tipo de motivo que

puede elegir entre los que se encuentran en
la ventana de dilogo (Motivos de rocas,
naturales, etc.), o restaurar a los que estn
por defecto.
- Seleccionar el motivo NUBES.
- Para acoplar todas las capas en una sola, ir al Men Capas > Acoplar imagen.
- Pulsar la tecla C para recortar la imagen o pulsar la Herramienta Recortar
RELLENOS SOLIDOS Y DEGRADADOS
- Pulsando ALT+BACKSPACE, se establece el color frontal sobre un rea seleccionada.
- Pulsando SHIFT+ BACKSPACE, se abre el cuadro de dilogo que permite utilizar un

motivo.
- Crear una nueva imagen de 800x600 pixeles. Establecer como color frontal BLANCO.
- Ir al Men Capa > Nueva > Capa, o pulsar CTRL+SHIFT+N. En esta capa y usando la
herramienta Lazo con una desvanesencia de 0 pixeles, y rellenar el rea seleccionada
de color Negro.
- Abrir la imagen wolf.jpg, seleccionar la forma y pegarla en la nueva imagen.
- Crear una nueva capa y trazar un marco elptico de forma circular, y pulsando
SHIFT+BACKSPACE, elija el motivo NUBES.
- Activar la capa Fondo, y activar la herramienta Degradado.
- Seleccione el tipo de degradado (1) en la barra de opciones como de tipo Lineal, luego
de clic en (2) para editar el degradado.
2 1
- Seleccione una ajuste de 3 colores (3), luego en cada indicador inferior (4), elegir el color
Azul (#0c1323), Blanco y nuevamente Azul. Cada color se elige de la opcin Color (5).
- Activar la capa Fondo, y activar la herramienta Degradado.
- Seleccione el tipo de degradado (1) en la barra de opciones como de tipo Lineal, luego
de clic en (2) para editar el degradado.
2 1
- Seleccione una ajuste de 3 colores (3), luego en cada indicador inferior (4), elegir el color
Azul (#0c1323), Blanco y nuevamente Azul. Cada color se elige de la opcin Color (5).
CORRECCION DE IMGENES
1. Herramienta Pincel Corrector

- Usado para corregir imperfecciones para que desaparezcan de la imagen, haciendo
coincidir la textura, iluminacin, transparencia y sombreado de los pixeles muestreados.
- Abrir la imagen pincel-corrector.jpg
- Pulsar ALT + clic en una zona cercana que sea tomada como muestra (1), luego hacer
clic sobre las zonas a corregir (2).
2. Herramienta Parche
- La herramienta Parche permite reparar un rea seleccionada con pxeles de otra rea o
un motivo. Al igual que la herramienta Pincel corrector, la herramienta Parche hace
coincidir la textura, la iluminacin y el sombreado de los pxeles muestreados con los
pxeles de origen. Tambin puede utilizar la herramienta Parche para clonar reas
aisladas de una imagen
- Abrir la imagen parche.jpg, y establecer los parmetros de esta herramienta de la

siguiente manera:
- Y haciendo una seleccin de la parte con la que voy a REPARAR, tomo precisamente mi
parche y lo arrastr encima de los defectos ms grandes en nuestra rea que nos ocupa
en esta explicacin.
- Y listo, haciendo unas selecciones adicionales se ha logrado el siguiente resultado, las

flechas sealan los parches que he aplicado a la imagen de nuestra modelo:
3. Herramienta Clonar
- La herramienta Tampn de clonar toma una muestra de una imagen, que ms tarde
puede aplicar sobre otra imagen u otra parte de esa misma imagen.
- Abrir la imagen tampon.jpg. El objetivo ser hacer desaparecer la ventana sealada en

(1).
- Activar la Herramienta TAMPON DE CLONAR, y seleccionar el tamao de pincel a un

dimetro de 35, dureza de 50 y opacidad 50 (2).
- Pulsar ALT + clic en una zona que ser tomada como muestra, y luego hacer clic
sostenido sobre el rea a cubrir.
AJUSTES DE IMAGEN
1. Ajustes Automticos
- Abrir el archivo princesa.jpg. Observar que existe una falta de contraste y los colores
son opacos.
- Ir al Men Imagen > Ajustes > Niveles Automticos, o pulsar CTRL + SHIFT + L
- Los ajustes de niveles automticos nos permiten modificar el contraste y el color de una
fotografa digital de forma automtica
2. Curvas
- Abrir el archivo paisaje-con-casa.jpg.
- Se nos presenta como un grfico de ejes X-Y que representa los valores de luminosidad
de los pxeles antes del ajuste (en la base) y los valores de salida, como quedarn al
final (en el lateral izquierdo). Se trata, simplemente, de modificar la posicin de una lnea
diagonal que indica para cada valor de entrada el valor de salida que le corresponde.
Slo tenemos que pulsar sobre ella y arrastrarla para crear un nuevo nodo e iniciar la
transformacin, bien de forma intuitiva con el ratn o introduciendo valores numricos.
3. Niveles
- Abrir la imagen el-faro.jpg. Se puede observar que la imagen carece de iluminacin.
- Ir al Men Imagen > Ajustes > Niveles, o pulsar CTRL + L. Seleccionar el

cuentagotas que permite tomar muestra de un punto de iluminacin, y luego hacer
clic sobre un punto claro de la imagen.
- Los reguladores del Ajuste Niveles tienen su equivalente en la herramienta Curvas: Los
movimientos A y B realizan el recorte de luces y sombras, C y D equivalen a oscurecer o
aclarar los tonos medios con el deslizador gris, E y F suponen el recorte de los niveles
de salida.
A
C F
D
1 2 3
E
- Los niveles son utilizados cuando se desea realizar una configuracin rpida de los
ajustes de sombras (1), medios tonos (2) e iluminaciones (3).
4. Tono/Saturacin
- Abrir la imagen matrix.jpg. Utilizar las herramientas de correccin de imgenes para
borrar el texto.
- Ir al Men Imagen > Ajustes > Tono/Saturacin o pulsar CTRL + U.
4
1
- Activar la opcin COLOREAR, y luego cambiar el Color (Tono) a 129, la Cantidad de

Color (Saturacin) a 51 y la Iluminacin (Luminosidad) a +2.
- Tambin se puede aplicar sobre reas seleccionadas.
5. Equilibrio de Color
- Abrir la imagen costa-equilibrio.jpg, observar que el color azul es ms dominante que
los dems.
- Ir al Men Imagen > Ajustes > Equilibrio de color, o pulsar CTRL + B
- Para este caso se aplica:
- El Equilibrio de color es la versin analtica del ajuste de color Variaciones ya que se

basan en la misma estrategia, seleccionar un rea de luminosidad (Sombras, Medios
tonos o Luces) y aumentar la presencia de un color del disco cromtico disminuyendo su
contrario.
- En la imagen colinas-equlibrio.jpg, se compensar la dominante azul en la sombras.
6. Reemplazar Color
- Abrir auto-azul.jpg, luego ir al Men Imagen > Ajustes > Reemplazar color.
- Utilizar para seleccionar el color de la imagen que se desea reemplazar, usando

una tolerancia (2) de 30, y definir el tono, la saturacin y la luminosidad de las reas
seleccionadas (3).
- Los botones permiten agregar o quitar muestras seleccionadas.
Contenido
- Uso de Textos: Textos y Mscaras de texto.

- Edicin de imgenes: Herramienta Desenfocar, Enfocar, Sobreexponer, Subexponer.
- Uso de Filtros. Efectos mezclando filtros
- Filtros Avanzados.
- Acciones.
USO DE TEXTOS
1. Herramientas Texto Horizontal y Vertical
- Abrir la imagen textos.jpg, y observar la muestra que vamos a realizar poniendo en
prctica los temas vistos anteriormente, y el uso de textos.
- Crear una nueva imagen de 400x300 pixeles. En la capa Fondo, usar la herramienta
Degradado de tipo Lineal a tres colores: celeste (#909ff7), amarillo (#f7ff13) y naranja
(#f8a109)
- En una nueva capa de nombre MAR, trazar una seleccin Marco Rectangular y
establecer el Degradado de tipo Lineal a dos colores: celeste (#56a4f5) y azul
(#0509ab).
- Una nueva capa de nombre SOL, trazar una seleccin Marco Elptico y establecer el
color amarillo como su relleno.
- Usar la herramienta Texto para digitar los textos indicados:
(1) Texto horizontal (Bauhaus93, regular, 28, enfocado, color azul)

(2) Texto horizontal (Bauhaus 93, regular, 18, enfocado, color azul), aplicar
transformacin libre y rotar.
(3) Texto vertical (Bauhaus 93, regular, 18, enfocado, color azul).
- Crear una nueva capa y activar la Herramienta Mscara de Texto Horizontal. Usar la
fuente Bauhaus 93, 48, alineacin centrada.
- Cuando activa la herramienta Mover, observe que se ha generado una seleccin con la
forma del texto digitado, ahora si lo desea puede aplicar un relleno de color slido o
degradado.
- Y si abre una imagen y selecciona todo (CTRL + A), la copia, y en nuestro dibujo lo
pegamos dentro (CTRL+SHIFT+V), la imagen estar contenida dentro del rea
seleccionada.
- Si escribe un texto, y lo selecciona, podr deformarlo desde el cuadro de opciones:
- En la ventana Deformar texto, puede elegir el tipo de deformacin:
- Quedando el texto de la siguiente manera.
EDICION DE IMGENES
1. Herramientas Desenfocar y Enfocar
- Abrir la imagen matrix.jpg, luego duplicar la capa y usar la herramienta lazo con una
desvanesencia de 5 pixeles y seleccionar la silueta de Neo.
- Invertir la seleccin y activar la herramienta Desenfocar con una intensidad de 100% y
un tamao de pincel de dimetro 36.
- Esta herramienta se utiliza para suavizar las reas definidas de una imagen, el efecto
que se consigue es disminuir el detalle de la misma. Por el contrario, la herramienta
Enfocar permite aumentar la claridad o el enfoque suave en las reas o bordes suaves.
2. Herramienta Sobreexponer y Subexponer
- Abrir la imagen edward-crepusculo.jpg, usando la herramienta sobreexponer con un

pincel suave, y de rango "medios tonos" y comenzamos a darle a la piel un tono plido.
- Usando la herramienta subexponer, y le damos sombra alrededor de los ojos, para dar
el efecto mortuorio, y para dar mayor profundidad a la mirada.
Aplicando la herramienta Sobreexponer Aplicando la herramienta Subexponer

Sobre el rostro del actor. Debajo de los ojos del actor.
USO DE FILTROS
Los filtros o plugins son aplicaciones grficas que nos permiten aplicar efectos especiales a
nuestras imgenes. Photoshop incluye sus propios filtros, y se accede a ellos desde el men
Filtro. Pero tambin existen los llamados filtros de terceros, que son creados por empresas
especializadas y generan efectos sorprendentes. Para utilizar estos filtros los debemos instalar o
simplemente copiar al directorio plugins dentro de Photoshop. Muchos de ellos los puedes
encontrar gratis, aunque los mejores son comerciales y los tienes que pagar. Entre los ms
conocidos y utilizados destacan:
Eye Candy, antes se llamaban Black Box, y son de Alien Skin.

Kais Power Tools o (KPT) diseados por HSC.
Blade Pro utilizados para aplicar texturas y relieves.
Filtros de Andrmeda.
Filtros de Nik.
Filtros de Extensis, etc, etc
1. Aplicando filtros bsicos

- Crear una nueva imagen de 800x600 de color negro como fondo.
- Establecer los colores por defecto.
- Ir al Men Filtro > Ruido > Aadir Ruido (cantidad de 25%, distribucin gaussiana y
monocromtico).
- Ajustar el nivel de los medios tonos en 0.40
- Crear una nueva capa, de nombre NEBULOSA. Establecer como color de frente rojo, y
como color de fondo negro.
- Ir al Men Filtro > Interpretar > Nubes. Luego retornar al Men Filtro > Interpretar >
Nubes de diferencia. Y pulsar CTRL+F para repetir el filtro aplicado y obtener la
apariencia deseada.
- Activar el modo de fusin TRAMA y una opacidad de 60%.
- Crear una nueva capa de nombre PLANETA y establecer los colores por defecto y
aplicar el filtro Nubes.
- Establecer los ajustes de tono/saturacin en Tono: 30, Saturacin: 50, Iluminacin: 0
Trazar una seleccin circular, usando el Marco Elptico, y luego ir al Men Seleccin >
Modificar > Desvanesencia: 2 pixeles. Invertir la seleccin y eliminar pulsando SUPR.
- Para crear un efecto de remolinos sobre la superficie del planeta, puede utilizar la
herramienta lazo con una desvanesencia de 2 pixeles, seleccionar una zona del planeta
creado y aplicar Men Filtro > Distorsionar > Molinete
- En una nueva capa de nombre RAYOS, establecer los colores por defecto. Aplicar
Nubes, luego Nubes de Diferencia. Ir al Men Imagen > Ajustes > Ajustes
automticos.
- Ir al Men Imagen > Ajustes > Invertir, o pulsar CTRL+I.
- Ajustar el nivel de los medios tonos en 0.10
- Ajustar los niveles de tono/saturacin al color deseado. Luego aplicar modo de fusin de
capa: Trama, y reducir la opacidad.
- Al finalizar utilizar la herramienta Borrador para que al final quede algo similar a:
- Aplicar un filtro que simule una estrella detrs del planeta (Men Filtros > Interpretar >
Destello).
2. Efectos con Textos
2.1. Texto Aceite

- Crear un Lienzo 800 x 600 pxeles, contenido: blanco
- Restablecer los colores estndar, presionar tecla D y pintar el lienzo.
- Usar texto horizontal (tipo arial black, color: #FFFFFF, tamao 150, centrar el
texto)
- Acoplar imagen hacia abajo: CTRL + E
- Ir al Men Filtros > Desenfocar > Desenfoque Gaussiano > Radio: 2.0
- Ir al Men Imagen > Rotar Lienzo : 90 ACD
- Ir al Men Filtros > Estilizar > Viento > Desde la izquierda
- Aumentar efecto: CTRL + F
- Ir al Men Imagen > Rotar Lienzo : 90 AC
- Modificar los niveles de Tono/Saturacin: CTRL + U
o Activar Colorear
o Tono : 70
o Saturacin : 50
o Luminosidad : -20
- Ir al Men Filtros > Artstico > Plastificado
o Intensidad : 20
o Detalle : 10
o Suavizar :7
2.2. Texto Fuego
- Usar texto horizontal (tipo arial black, color: #FFFFFF, tamao 72, centrar el
texto)
- Ir al Men Filtros > Desenfocar > Desenfoque Gaussiano > Radio: 2.0 px.
- Ir al Men Imagen > Rotar Lienzo : 90 ACD
- Ir al Men Filtros > Estilizar > Viento > Desde la derecha.
- Aumentar efecto: CTRL + F
- Ir al Men Imagen > Rotar Lienzo : 90 AC
- Ir al Men Filtros > Distorsionar > Rizo: 100
- Ir al Men Imagen > Ajustar > Equilibrio de color:
o Medios tonos : +100 / 0 / -100
o Sombras : +100 / 0 / -100
o Iluminaciones : +100 / 0 / 0
2.3. Texto Hielo

- Usar texto horizontal (tipo Impact, color: #FFFFFF, tamao: 150, centrar el texto)
- Ir al Men Seleccin > Cargar Seleccin > OK
- Invertir seleccin: CTRL + SHIFT + I
- Ir al Men Filtro > Pxelizar > Cristalizar : Tamao de Celda: 10
- Invertir seleccin: CTRL + SHIFT + I
- Ir al Men Filtro > Ruido > Aadir Ruido
o Cantidad : 70
o Distribucin : Gausiana
o Activar casilla monocromtica
- Ir al Men Filtro > Desenfocar > Desenfoque Gaussiano > Radio: 2 pixeles
- Ir al Men Imagen > Rotar Lienzo: 90 AC
- Ir al Men Filtro > Estilizar > Op. Viento > Desde la derecha
- Aumentar tamao: CTRL + F
- Ir al Men Imagen > Rotar Lienzo > 90 ACD
- Activas los ajustes de Tono/Saturacin: CTRL + U
o Activar Casilla colorear
o Tono : 200
o Saturacin : 30
o Luminosidad : 10
- Activar Herramienta Pincel y colocar en Lista Grande, seleccionar estrella 55
pxeles. El color debe ser #FFFFFF para resaltar el brillo del hielo.
3. Efectos de Textura
2.1. Textura de Madera

- Crear un lienzo de 800 x 600, modo Color RGB, contenido: blanco.
- Usar Herramienta Degradado Lineal, y en el selector de degradado, seleccionar
el color Cobre.
- Luego aplicar el degradado de izquierda a derecha.
- Ir al Men Filtro > Textura > Granulado
o Intensidad : 37
o Contraste :1
o Tipo de Granulado : Horizontal
- Ir al Men Filtro > Distorsionar > Molinete
o Angulo: 119
2.2. Textura de Piedra

- Crear un lienzo de 800 x 600, modo color RGB, contenido: blanco
- Restablecer los colores estndar, luego selecciona el siguiente color: #828282
en color frontal y pintarlo con bote de pintura.
- Ir al Men Filtro > Interpretar > Nubes
o Cantidad :4
o Distribucin : Gaussiana
o Monocromtico : Activado
- Hacer clic a la ficha Canales y al lado derecho de la ficha clic al botn circular y
luego: Nuevo Canal
o Nombre : Piedra
o Seleccionar :reas de mascara
o Color : #000000
o Opacidad : 50%
- Ir al Men Filtro > Interpretar > Nubes de diferencia
o Cantidad :3
- Hacer clic a la ficha Capas y seleccionar la capa fondo.
- Ir al Men Filtro > Interpretar > Efectos de Iluminacin
o Estilo : Por Defecto
o Tipo de Luz : Foco
o Canal de textura : Piedra
2.3. Textura Arena

- Crear un lienzo de 800 x 600, modo Color RGB, contenido: blanco
- Seleccionar el siguiente color: #BEA387 como color frontal.
- Pintar el lienzo usando bote de pintura.
- Ir al Men Filtro > Ruido > Aadir ruido
o Cantidad : 10
o Monocromtica : Activada
- Crear nueva capa: Ctrl. + Shift + N
- Rellenar la capa con bote de pintura de color: #000000
- Usar Herramienta Pincel Difuso de 200 px de dimetro, con opacidad: 50% de
color: #FFFFFF y hacer manchas sobre la capa.
- Ir al Men Filtro > Desenfocar > Desenfoque Gaussiano
o Radio : 25
o Cantidad : 10
o Distribucin : Gaussiano
- En ventana Capas, cambiar el Modo de Fusin: Luz Suave.
Contenido
- Entorno de Trabajo.
- Usando Herramientas Vectoriales y Textos.
- Creando nuevas imgenes de mapa de bits.
- Usando herramientas de seleccin.
- Manejo de capas.
INTRODUCCIN A ADOBE FIREWORKS CS4

Adobe Fireworks CS4 es uno de los programas ms avanzados para disear y producir
elementos grficos para las pginas Web. Con l podrs crear de manera rpida y sencillo
cualquier grfico para una pgina Web, utilizando elementos visuales que harn que tu diseo
sea atractivo visualmente.
En esta sesin conocers los elementos del entorno de trabajo, las diferentes secciones de
herramientas que se pueden utilizar, la ventana del documento, los paneles y el inspector de
propiedades.
NOVEDADES DE LA VERSION CS4
Mejora del rendimiento y la estabilidad

Puede trabajar de forma ms rpida e inteligente con las mejoras generales de rendimiento de
Fireworks, desde abrir y guardar archivos hasta la actualizacin de smbolos y las operaciones
con numerosos mapas de bits y vectores.
Nueva interfaz de usuario

Podr cambiar de otras aplicaciones de Creative Suite (como Photoshop, Illustrator y Flash)
gracias al diseo sencillo y familiar de la interfaz de usuario universal.
Diseos basados en CSS

Disee pginas Web completas en el potente entorno grfico de Fireworks y exporte en un paso
los diseos basados en CSS compatibles con los estndares para la Web, junto con las hojas de
estilos externas. Empiece con uno de los seis diseos ms comunes e integre grficos de primer
plano y de fondo con la deteccin automtica de margen y relleno. Incluya smbolos HTML
sofisticados en los diseos de Fireworks para especificar cabeceras, vnculos y propiedades de
formato y obtener un control CSS preciso.
Exportacin a PDF
Puede generar documentos PDF de alta fidelidad, interactivos y seguros a partir de
componentes de diseo de Fireworks para una comunicacin mejorada con el cliente.
Motor de texto de Adobe

Permite generar diseos de texto superiores con las funciones mejoradas de introduccin de
texto del Motor de texto de Adobe, conocido para los usuarios de Photoshop e Illustrator, y ahora
disponible en Fireworks. Podr importar o copiar y pegar caracteres de doble byte de Adobe
Illustrator o Photoshop sin perder fidelidad. La inclusin de texto flotante en un trazado
proporcionar mayor impacto en los logotipos de texto.
Estilos automticos
Aplique a un objeto o texto de Fireworks estilos de diseo profesional o de su propia coleccin
personal. Actualice los efectos, colores y atributos de texto aplicados modificando un solo origen
de estilo.
Mejoras del espacio de trabajo

Se proporcionan guas inteligentes para un posicionamiento y una medida rpidos y precisos de
las guas y elementos del lienzo: una visualizacin previa le permite conocer la posicin en el
lienzo mientras arrastra las guas hasta la posicin adecuada. La edicin directa de smbolos
permite una mejora precisa del smbolo en contexto con el resto del diseo; la herramienta de
expansin Escala de 9 divisiones ahora se aplica a cualquier objeto del lienzo, no slo a los
smbolos.
ENTORNO DE TRABAJO.
1era Forma (clsica)
2da Forma
Cargando el ejecutable del programa (Men Inicio > Ejecutar: FIREWORKS ).
Una vez cargado el programa, se muestra una ventana que permite:
Abrir una imagen existente.

Crear una nueva imagen.
Navegar por la ayuda en lnea y tutoriales.
El Entorno de Adobe Fireworks CS, al abrir una imagen es el siguiente:
1. Barra de Men.
2. Barra de Herramientas Estndar.
3. Cuadro de Herramientas.
4. Panel de Propiedades.
5. rea de Trabajo.
6. Men de Paneles.
CREAR Y GUARDAR UNA NUEVA IMAGEN.
Crear una nueva imagen, pulsando CTRL+N, establecer los siguientes valores 1200 (ancho) y
600 (alto), resolucin de 72 pixeles/pulgada y color de lienzo blanco.
Pulsar CTRL+S para guardar el archivo en una determinada ubicacin (Nombre: SASHIMI.png)..
Por defecto el archivo se guarda en formato PNG (Portable Network Graphic.).
PANELES. ORGANIZACIN DE PANELES Y GRUPOS DE

PANELES.
En Fireworks CS4 contamos con diferentes paneles como el de: Capas,

Optimizar, Activos, Fotogramas, Historial, etc.
Estos tambin los podemos habilitar y deshabilitar desde la barra de men en la

opcin de ventana
Tambin podemos agrupar los paneles en una ventana, en la que se muestran
por categora presionando el botn:

MAPAS DE BITS
Los mapas de bits son imgenes compuestas de pequeos cuadrados de color denominados
pxeles que se combinan para crear una imagen. Algunos ejemplos de mapas de bits son
fotografas, imgenes tomadas con un escner y elementos grficos creados con programas de
pintura.
Fireworks posee un potente conjunto de efectos automticos para ajustar el tono y el color y
numerosos recursos para retocar imgenes de mapa de bits, como el recorte, el fundido y la
duplicacin o clonacin de imgenes. Adems tambin incluye un grupo de herramientas de
retoque de imgenes: Desenfocar, Perfilar, Aclarar, Oscurecer y Manchar.
a. Dibujo, pintura y edicin de mapas de bits.
La Herramienta Lpiz permite crear trazos libres, eligiendo

previamente el color en el panel Propiedades.
La Herramienta Pluma, es similar al anterior, pero con la

posibilidad de establecer otras propiedades.
Para poder crear un nuevo Mapa de Bits, activar el botn Nueva imagen
de Mapa de Bits, en el Panel Capas (Men Ventana > Capas).

Podr dibujar:
Usar la Herramienta Borrador para eliminar las zonas no deseadas de la forma

dibujada.
En la segunda forma, seleccionarla y VOLTEAR HORIZONTALMENTE y TRAER HACIA

ADELANTE.
Pulsar CTRL+T para aplicar TRANSFORMACION LIBRE, y poder cambiar el tamao y

rotar la forma.

b. Uso de las Herramientas de Seleccin.
La Herramientas Lazo permite seleccionar una zona trazada por el usuario. Mientras
que la Herramienta Lazo Poligonal es utilizada para seleccionar reas lineales o
poligonales. Tener en cuenta que antes de usarla se debe establecer el tipo de borde
(Duro, Suavizado o Fundido).
Tener en cuenta que al seleccionar, mientras mantenga pulsada la tecla MAY o SHIFT,
puede AGREGAR selecciones, mientras que al pulsar la tecla ALT, quita o RESTA
selecciones.
Al pulsar CTRL+D, quita todas las selecciones. Esta funcionalidad es similar a la se

Photoshop.

Cada una de las selecciones anteriores, las puede copiar y pegar en otra imagen.
La Herramienta Varita Mgica, permite seleccionar zonas que contengan

pixeles con similar tonalidad al punto seleccionado. Este nivel de similitud es
establecido en la propiedad TOLERANCIA.

Al igual que en Photoshop, se puede invertir la seleccin pulsando CTRL+MAYUS+I.
Las Herramientas Recuadro y Recuadro Oval permiten seleccionar reas

rectangulares o elpticas, las que pueden servir para seleccionar objetos, copiarlos,
duplicarlos o para rellenarlos de un color.
En una nueva imagen de mapa de bits, usar la Herramienta Recuadro para

trazar un rectngulo con borde DURO. Luego activar la Herramienta Cubo
de Pintura, y en la propiedad seleccionar un color Naranja Claro. Repetir
este procedimiento para agregar otros dos rectngulos de color rojo y
verde.

c. Relleno slido, degradado, textura y de patrones.
Los colores se pueden establecer desde el grupo Colores, y seleccionar las propiedades
que permitan trabajar con colores slidos, degradados, de textura, etc.

d. Retoque de mapas de bits: Clonacin, Desenfoque, Ojos Rojos, etc.
La Herramienta Sello, permite clonar un rea previamente seleccionada al pulsar ALT,

para reemplazar otras zonas.
La Herramienta Reemplazar Color, permite reemplazar el color de muestra por otro,

usando una forma similar a la del pincel.

La Herramienta Eliminacin de Ojos Rojosr, permite cambiar el color rojizo de los
ojos, efecto que se produce cuando un punto de iluminacin incide sobre el ojo.
La Herramienta Desenfocar, se utiliza para suavizar las reas definidas de una imagen,
el efecto que se consigue es disminuir el detalle de la misma.
En la siguiente imagen aplicaremos esta herramienta:

Quedar algo como esto:
e. Filtros y efectos. Mscaras de Mapas de Bits.

Todos los objetos utilizados en Fireworks, sean vectoriales o mapa de bits, se pueden
resaltar de manera ms eficiente aplicando diferentes efectos especiales. El grupo de
efectos especiales los puedes encontrar en la parte inferior del panel de propiedades
cada vez que seleccionas un objeto.
Dentro de los efectos especiales que puedes encontrar estn: iluminacin, desenfocar,
ruido, bisel y relieve.

Ajustar Color > Matiz Saturacin
Sombrear e Iluminar > Iluminado
Ruido > Aadir ruido
Bisel y Relieve > Bisel Exterior

ELEMENTOS VECTORIALES.
a. Dibujo de Elipses, Rectngulos, Rectngulos redondeados y Lneas.
Estas herramientas permiten crear formas que pueden ser modificadas desde el Panel
de Propiedades (ancho, tamao, color de trazado y de relleno), o usando la
Herramienta Subseleccin, modificar alguno de sus nodos.

b. Dibujo de Polgonos y Estrellas Bsicas.
Al dibujar un Polgono, este presenta unos puntos de control que permiten modificar la
figura.
c. Dibujo de formas automticas: Donas, Espirales, Flechas, etc.
a. Donuts b. Espiral c. Medicin d. Flecha

d. Uso de la Herramienta Pluma.
La Herramienta Trazado de vectores, situada en el men emergente de la herramienta

Pluma, es similar a utilizar un rotulador o una pintura a la cera. La herramienta cuenta
con una amplia variedad de categoras de trazos de pincel, como aergrafo, caligrfico,
carbn, cera o antinatural. Dentro de cada categora existen distintos trazos, como
Marcador claro y Marcador oscuro,Salpicadura de pintura, Bamb, Cinta, Confeti, 3D,
Pasta de dientes y Pintura viscosa.
La Herramienta Pluma adems de conectar los puntos con segmentos rectos, la

herramienta Pluma permite dibujar lo que se conoce como curvas Bezier, que son
segmentos curvos calculados matemticamente. Cada tipo de punto, ya sea punto de
esquina o de curva, determina si las curvas adyacentes son lneas rectas o curvas.
e. Modificando los objetos vectoriales usando la Herramienta

Subseleccin.
Seleccione el trazado con la herramienta Puntero o Subseleccin.
Haga clic en un punto de curva seleccionado, el que debe aparecer como un crculo azul
slido. Los tiradores de punto se proyectan a partir del punto.

Arrastre los tiradores a otra posicin. Para restringir el movimiento de los tiradores a
ngulos de 45, pulse la tecla MAYS mientras arrastra.
Ejercicio.
Abrir el archivo SASHIMI.png que estuvo trabajando en el captulo anterior.
Usar herramientas vectoriales para crear las lneas y el crculo detrs del logo con un color
degradado de rojo a blanco.
Aplicar filtros para dar un color verdoso al templo, y un iluminado blanco al plato de arroz.

f. Herramienta Texto. Adaptar textos a trazados.
Utilice la herramienta Texto y las opciones del Inspector de propiedades para introducir,
dar formato y editar texto en sus grficos.
Realizar un trazado usando la herramienta Pluma, y el texto que se desea adaptar a este
trazo.
Seleccionar la curva y el texto, ir al Men Texto > Unir al trazado.

g. Combinar trazados: Unir, intersecar y recortar.
Ir al Man Modificar > Combinar trazados > Interseccin. El trazado resultante toma
los atributos de trazo y relleno del objeto situado ms atrs.

Se pueden eliminar las partes de un objeto de trazado seleccionado que queden
solapadas por otro objeto de trazado seleccionado que est situado delante.
Es posible recortar un trazado utilizando la forma de otro. El trazado situado ms delante

define la forma del rea recortada.
h. Mscaras Vectoriales.
Cuando se utiliza un objeto vectorial como mscara, se puede utilizar su contorno de

trazado para recortar otros objetos. Si se trata de un objeto de mapa de bits, el brillo de
sus pxeles o su transparencia afectan a la visibilidad de otros objetos.
Para este proceso, cortar la imagen, luego de haber trazado alguna forma vectorial,
seleccinela y pulse CTRL+MAYUS+V, o ir al Men Edicin > Pegar dentro.

CAPAS.
Cada objeto de un documento reside en una capa. Es posible crear capas antes de dibujar o
aadirlas cuando se vayan necesitando. El lienzo est situado debajo de todas las capas y no es
una capa en s mismo.
El panel Capas muestra el estado actual de todas las capas del estado actual o la pgina de un
documento. El nombre de la capa activa aparece resaltado. El orden de apilamiento es el orden
en que los objetos aparecen en el documento y determina la forma en que los objetos de una
capa se superponen a los objetos de otra. Fireworks coloca la capa creada ms recientemente
en la parte superior de la pila. Puede cambiar el orden de las capas y los objetos de las capas
as como crear subcapas y colocar objetos en ellas.
a. Duplicar, Agrupar, Fusionar.

Para DUPLICAR una capa, seleccione la capa origen, y arrastrar hacia el icono Capa
Nueva / Duplicada.
Aprovechamos para cambiar el nombre a esta capa.

La fusin provoca que todos los objetos vectoriales y de mapa de bits seleccionados se
allanen sobre el objeto de mapa de bits situado justo debajo del objeto seleccionado en
ltimo lugar. El resultado es un solo objeto de mapa de bits. Una vez fusionados, los
objetos vectoriales y de mapa de bits no se pueden editar por separado, y se pierde la
posibilidad de editar los vectoriales.
Para nuestro ejemplo, nos ubicaremos fusionaremos las capas que forman el LOGO.

b. Organizacin.
Para organizar las capas y objetos de un documento, es posible asignarles un nombre y
reordenarlos en el panel Capas. Los objetos pueden moverse dentro de una capa o
entre capas. El desplazamiento de capas y objetos en el panel Capas cambia el orden
en que stos aparecen en un documento. Los objetos situados en la parte superior de
una capa aparecen en el lienzo delante de los dems objetos de dicha capa. Los objetos
de la capa superior aparecen delante de los objetos de las capas inferiores.
c. Manejando la opacidad.
El recuadro anterior indica en donde se encuentra el valor de la opacidad. Este valor

permite que los objetos que se hallan en la capa seleccionada estn ms opacos o ms
transparentes.
PGINAS
Un solo archivo PNG de Fireworks puede contener varias pginas y proporcionar la forma
idnea para elaborar prototipos Web e interfaces de aplicaciones. Cada pgina contiene su
propia configuracin para el tamao y el color del lienzo, la resolucin de imagen y las guas.
Esas opciones se configuran, bien por pgina, bien globalmente, para todas las pginas de un
documento. Aparte de la capa Web, cada pgina contiene tambin un conjunto nico de capas.
Para los elementos comunes, no obstante, se puede utilizar una pgina maestra o compartir
capas entre las diversas pginas.
a. Aadir, eliminar y duplicar.
Selector de Pginas Nuevo / Duplicar Eliminar Pgina

pgina

b. Creacin de pginas maestras.
Para utilizar un conjunto de elementos comunes en todas las pginas, utilice una pgina
maestra. Cuando una pgina normal se convierte en una pgina maestra, esta se mueve
hacia la parte superior de la lista, en el panel Pginas. Cuando se crea una pgina
maestra, se aade una capa de pgina maestra al final de la jerarqua de capas en cada
pgina.
En el panel Pginas, haga clic con el botn derecho en una pgina existente y
seleccione Definir como pgina maestra en el men emergente. Cualquier capa
compartida entre varias pginas se convertir en una capa normal (no compartida). No
obstante, las capas compartidas entre fotogramas seguirn sindolo.
Una vez creada una pgina maestra, cualquier pgina nueva heredar automticamente
la configuracin de la pgina maestra. Las pginas existentes no heredan esa
configuracin, a no ser que se vinculen con la pgina maestra. Si ms tarde cambia la
pgina maestra, todas las pginas vinculadas se actualizarn automticamente.
PROYECTO: CREACIN DE UNA WEB QUE CONTENGA

VARIAS PGINAS.
- Abrir la imagen SASHIMI.png, y activar la pestaa PGINAS.
- Activar el icono Nueva Pgina, y crear el siguiente diseo en un lienzo de 1000 px de

ancho por 1200 px de alto.

- En el Panel Pginas, d un clic derecho sobre la nueva pgina creada, y elegir DEFINIR
COMO PAGINA MAESTRA.
- Crear una nueva pgina. Observe que la pgina 3 hereda los elementos de la pgina
maestra, y que no se pueden editar dichos objetos.
- Insertar otras pginas con la siguiente modificacin. Adems, cambiar el nombre a cada
una de las pginas.

- Se puede colocar un texto automtico como ejemplo, para ello ir al Men Comando >
Texto > Lorem Ipsum

USO DE ESTILOS.
Para guardar y volver a aplicar un conjunto de rellenos, trazos, filtros y atributos de texto
predefinidos, cree un estilo. Al aplicar un estilo, el objeto adopta todas sus caractersticas.
Fireworks incluye muchos estilos predefinidos. Estos estilos se pueden cambiar y eliminar, y es
posible aadirles nuevas caractersticas. El DVD de Fireworks y el sitio Web de Adobe incluyen
muchos otros estilos predefinidos que se pueden importar a Fireworks. Tambin es posible
exportar estilos y compartirlos con otros usuarios de Fireworks, o importarlos de otros
documentos de Fireworks.
a. Creacin y eliminacin de estilos.

Use el panel Estilos para crear, almacenar y aplicar la gama completa de estilos a
objetos y texto. Para un acceso rpido al subconjunto de estilos que se encuentra en un
documento, use el men de estilos actual en el Inspector de propiedades.
- Seleccione los objetos del lienzo en los que desea aplicar el estilo.
- Ir al Men Ventana > Estilos para mostrar el panel Estilos.

- Elija Documento actual para acceder a los estilos utilizados actualmente o seleccione un
estilo preestablecido del men emergente para acceder a los estilos predefinidos de
Fireworks.
- En el ejemplo, en la Pgina CARTA, trazamos un rectngulo vectorial, al que aplicamos

un estilo de la categora ESTILOS DE PLASTICO.

b. Edicin, exportacin e importacin de estilos.
Una vez adicionado el estilo, este puede ser modificado para su uso posterior.
- En el ejemplo, en la Pgina CARTA, al rectngulo que aplicamos el estilo plstico,

vamos a cambiar el filtro en AADIR RUIDO en un valor de 10, y bajar la opacidad en
50.
- Crear un nuevo estilo desde cualquiera de los iconos mostrados en la ventana anterior, y
guardarlo con el nombre de MiEstilo. Luego aplicar sobre los otros rectngulos ya
creados.
SMBOLOS
Fireworks tiene tres tipos de smbolos: smbolos grficos, de botn y de animacin. Al editar
el objeto de smbolo original, las instancias copiadas cambian de manera automtica para
reflejar el smbolo editado (a menos que se rompa el vnculo entre ambos).
Los smbolos son tiles cuando se desea volver a utilizar un elemento grfico. Tambin permiten
crear botones y objetos de animacin en varios estados.
a. Creacin y Edicin.
Para crear un smbolo a partir de un objeto seleccionado.
- Seleccione el objeto y elija Men Modificar > Smbolo > Convertir en smbolo.
- Introduzca un nombre para el smbolo en el cuadro Nombre.
- Seleccione un tipo de smbolo.

- Para escalar el smbolo sin distorsionar su geometra, seleccione Activar guas
de escala en 9 divisiones.
- Para guardar el smbolo para que pueda utilizarse en varios documentos,

seleccione la opcin Guardar en Biblioteca comn.
- El objeto seleccionado se convierte en una instancia del smbolo, y el Inspector

de propiedades muestra las opciones de smbolo.
Para crear un smbolo desde cero.
- Siga uno de estos procedimientos:

Seleccione Men Edicin > Insertar > Nuevo smbolo.
Elija Nuevo smbolo en el men de opciones del panel Biblioteca de
documentos.
- Seleccione un tipo de smbolo.
- Para utilizar las guas de escala de 9 divisiones para escalar el smbolo,

seleccione la opcin Activar guas de escala en 9 divisiones y, a continuacin,
haga clic en Aceptar.
- Cree el smbolo mediante las herramientas del panel Herramientas.
b. Instancias.
Arrastre un smbolo desde el panel Biblioteca de documentos hasta el documento actual.
Al editar un smbolo, todas las instancias asociadas a l se actualizan de manera

automtica para reflejar la mayora de las modificaciones. Sin embargo, algunas
propiedades son independientes.
- En la pgina QSOMOS, crear un rectngulo vectorial de color gris del mismo

tamao detrs de los textos Inicio, Quienes somos, Carta, Galera y
Reservas.
- Seleccionar el primer rectngulo y el texto Inicio, luego ir al Men Modificar >

Smbolo > Convertir en smbolo o pulsar F8. Elegir el tipo BOTON y establecer
el nombre btnInicio y Activar guas de escala de 9 divisiones.
- Se muestra como cambia la apariencia de los elementos seleccionados. Repetir

el mismo procedimiento para formar los botones Quienes, Carta, Galera y
Reserva.

- Al arrastrar el smbolo desde el Panel Biblioteca de Documentos, estamos
creando una instancia del smbolo seleccionado.

Contenido
- Animaciones y creacin de Banners.

- Creacin de Botones.
- Mapas de imgenes e intercambio de imgenes.
- Divisiones y zonas interactivas.
- Aadir comportamientos. Creacin de mens popup.
- Exportar desde Fireworks como grficos y como HTML.
ANIMACIONES
En Adobe Fireworks, puede crear animaciones con anuncios en titulares, logotipos y vietas en
movimiento. Las animaciones se crean mediante la asignacin de propiedades a objetos
llamados smbolos de animacin. La animacin de un smbolo se compone de estados, que
contienen las imgenes y los objetos de la animacin. Una animacin puede contener ms de un
smbolo y cada uno de ellos puede realizar una accin diferente. Los distintos smbolos pueden
tener un nmero diferente de estados. La animacin termina cuando acaba la accin de todos
los smbolos.
a. Creacin de smbolos de animacin.

Los smbolos de animacin son los actores de la animacin. Un smbolo de animacin
puede ser cualquier objeto creado o importado y pueden guardarse varios en un nico
archivo. Cada smbolo tiene sus propias caractersticas y se comporta de forma
independiente, por lo que se pueden crear smbolos que se muevan por la pantalla,
mientras otros desaparecen o reducen su tamao.
- Ir al Men Edicin > Insertar > Nuevo smbolo.

- En el cuadro de dilogo Convertir en smbolo, escriba un nombre para el smbolo
nuevo.
- Seleccione Animacin y haga clic en Aceptar.
- En el panel de documentos, utilice las herramientas de texto o de dibujo para
crear un objeto nuevo. Se pueden dibujar objetos vectoriales o de mapas de bits.
-

Propiedades de los smbolos de animacin.
Estados: Nmero de estados de la animacin. Se pueden especificar hasta 250 con el

deslizador o introducir un nmero en el cuadro Estados. El valor predeterminado es 5.
Mover: Distancia, en pxeles, que cubre el objeto en movimiento (slo en el cuadro de

dilogo Animar). El valor predeterminado es 72, pero no hay lmite. El movimiento es
lineal y no existen estados clave (a diferencia de Flash y Adobe Director).
Direccin: Direccin, en grados de 0 a 360, en que se mueve el objeto (slo en el

cuadro de dilogo Animar). Tambin puede modificar los valores de movimiento y
direccin si arrastra los tiradores de animacin del objeto.
Escala Cambio en tamao del smbolo de principio a fin, expresado como porcentaje. El
valor predeterminado es 100%, pero no hay lmite. Para escalar un objeto del 0% al
100%, el objeto original debe ser pequeo; se recomienda utilizar objetos vectoriales.
Opacidad Grado de aparicin o desaparicin paulatinas de principio a fin. Los valores

estn comprendidos entre 0 a 100, el valor predeterminado es 100%. Para crear un
fundido se requieren dos instancias del mismo smbolo: una para que aparezca y otra
para que desaparezca.
Rotacin Grado de rotacin de principio de final. El rango de valores es de 0 a 360. Se

pueden introducir valores ms altos para realizar ms de una rotacin. El valor
predeterminado es 0.
A la derecha y A la izquierda Direccin en que rota el objeto: en el sentido de las

agujas del reloj (A la derecha) o en el sentido inverso a las agujas del reloj (A la
izquierda).
- En un nuevo lienzo, colocar una imagen cualquiera, y luego convertirlo en un

smbolo de tipo Animacin.

- Establecer en Estados: 4
- El punto de color verde corresponde a la posicin inicial, el rojo a la posicin

final. Los celestes corresponden a la ubicacin en cada estado.
- Se puede configurar el tiempo para cada estado y comenzar la animacin en los

controles ubicados en la parte inferior.

-
b. Edicin de trazados de movimiento.

Un smbolo de animacin seleccionado tiene un cuadro delimitador nico y un trazado
de movimiento que indica la direccin en que se mueve el smbolo. El punto verde del
trazado de movimiento indica el punto de partida y el rojo el final. Los puntos azules
representan los estados. Por ejemplo, un smbolo con cinco estados cuenta con un
punto verde, tres azules y uno rojo en su trazado.
Si el objeto aparece en el tercer punto, el estado actual es el 3.
Para cambiar la direccin de movimiento se puede modificar el ngulo del trazado.
c. Uso de Estados.
Las animaciones se producen creando estados, cuyo contenido aparece en el panel
Estados. Se puede asignar un nombre a cada estado, reorganizarlos, establecer de
forma manual los tiempos de animacin y mover objetos de un estado a otro.
Cada estado tambin dispone de propiedades asociadas. Si establece la demora de

estado o si oculta un estado, podr ver la apariencia que tendr la animacin mientras la
edita.

En las animaciones, las capas sirven para organizar los objetos que forman parte del
decorado o del fondo de la animacin. Si desea que algunos objetos aparezcan en todo
momento en la animacin, colquelos en una capa y srvase del panel Capas para
compartirla en todos los estados. Los objetos de una capa que se comparten en varios
estados estarn visibles en todos los estados.
d. Interpolacin.
En Fireworks, la interpolacin es un proceso manual que mezcla dos o ms instancias
del mismo smbolo creando instancias intermedias con atributos interpolados. Use la
interpolacin en objetos que describan movimientos sofisticados por todo el lienzo o en
objetos cuyos filtros automticos varen en cada estado de la animacin. Por ejemplo,
puede interpolar un objeto de forma que parezca moverse a lo largo de un trazado lineal.
- Seleccione dos o ms instancias del mismo smbolo grfico en el lienzo. No

seleccione instancias de smbolos diferentes.
- Ir al Men Modificar > Smbolo > Entre instancias.
- En el cuadro de dilogo Entre instancias, introduzca el nmero de pasos de

interpolacin que se insertan entre el par original.
- Para distribuir los objetos interpolados en estados independientes, elija

Distribuir en estados y haga clic en Aceptar.
- Puede realizar esta accin posteriormente seleccionando todas las instancias y

haciendo clic en el botn Distribuir en estados del panel Estados.

PROYECTO: CREACIN DE GIFS ANIMADOS Y BANNERS
PUBLICITARIOS.
- Abrir el archivo Mascota.png.
- Para crear un gif animado, tendremos que crear varios estados con diferentes partes
que sern usadas como parte de la animacin, iniciamos haciendo clic sostenido sobre
el Estado 1 hacia el icono Estado nuevo/duplicado.
- Usando herramientas vectoriales y de mapa de bits, realizar las siguientes

modificaciones.

- Activar las opciones Mostrar todos los estados, y establecer el tiempo de demora de
visualizacin de los estados (15/100 segundos).
- Exportar el archivo (Men Archivo > Exportar), como gif.
Los Banners publicitarios, tienen la misma forma de trabajo, y dependiendo del sitio en donde
sea publicado, dependen de un tamao establecido, duracin y tamao en KB. Por ejemplo, si
tenemos una web que ofrece artculos de artesana podramos reservar ciertos lugares en donde
podramos alojar los banners publicitarios de otros negocios similares, como agencias de
turismo, etc.
Aqu un ejemplo de un banner encontrado en la web de monografas.com.
- En una nueva imagen de 728x150, y a una resolucin de 72 pixeles/pulgada, fondo de

color negro, realizar el siguiente diseo en cada fotograma. Establecer una duracin de
cada fotograma de 20 / 100 segundos y al final exportarlo como GIF.

- Una vez que haya sido completado y sea incrustado en una pgina web, se le puede
establecer el vnculo de direccin.
BOTONES.
a. Creacin de smbolos de tipo botn.
Los botones (un tipo especial de smbolo) se utilizan como elementos de navegacin
para una pgina Web. Mediante el Inspector de propiedades, resulta muy fcil editar los
botones. Ya que es posible arrastrar instancias de un botn desde la biblioteca de
smbolos al documento, se puede cambiar el aspecto grfico de un nico botn y
actualizar automticamente el aspecto de todas las instancias de botn de una barra de
navegacin.
- La mayora de objetos grficos o textuales pueden convertirse en un botn. Para crear

un botn o convertir un objeto en un botn, siga el procedimiento del captulo anterior y
seleccione Botn para el tip o de smbolo.
- Es posible editar el texto, la URL y el elemento destino de una instancia de botn sin
afectar al resto de las instancias del mismo botn y sin romper la relacin smbolo-
instancia.
- Las instancias de botn estn encapsuladas. Fireworks mueve todos los componentes y
estados asociados a los botones que arrastre al documento.

- Al igual que otros smbolos, los botones tienen un punto de registro (un punto central
que ayuda a alinear el texto y los diferentes estados del botn mientras lo edita).
- Abrir el archivo Sashimi.png, luego seleccionar la Pgina 2, en el texto Inicio, y pulsar F8

para convertir en un smbolo de tipo Botn de nombre: btnInicio.
- Hacer un doble clic en la zona de color verde que representa al botn creado.
b. Estados de los botones.

Los estados de un botn son los comportamientos que se mostrarn en la pantalla
cuando el puntero del mouse trabaje con el botn. Los estados que puedes trabajar con
un smbolo botn son:
ESTADO DESCRIPCIN
Arriba El estado normal del botn al cargar la Web
Sobre Aparece cuando el cursor est sobre el botn
Abajo Cuando presionas el botn izquierdo sobre el botn
Sobre y Abajo Cuando el botn est presionado, si se sita el cursor sobre el
botn seguir cambiando de aspecto.
Zona activa La zona de vinculacin del botn
Los estados son predefinidos en Fireworks, de tal forma que tu trabajo consiste,
realmente, en modificar la apariencia que tendr el botn en cada uno de los estados.
- En el estado Arriba, solamente estar el texto.

- Activar el estado Sobre, y hacer clic sobre el botn Copiar grfico arriba. Ir a la
Ventana Capas y agregar un Mapa de Bits, y usando la herramienta Recuadro Oval
(Borde Fundido, cantidad 30), seleccionar un rea oval y rellenar de color blanco.
- Activar el estado Abajo, y hacer clic sobre el botn Copiar grfico sobre. Seleccionar
el ovalo y disminuir de tamao.
- Al culminar, hacer clic sobre el botn Listo.
- De manera similar establecer botones para los textos: Carta (btnCarta) y Galera
(btnGaleria), de tal manera que se observen los siguientes botones en:
Pgina 2
Pgina 3

Pgina 4
- Ir a la Ventana Pginas y cambiar los nombres de las pginas haciendo doble clic en el
nombre.
c. Definiendo las propiedades interactivas del botn.
- Establecer el vnculo de cada botn a las pginas que debe mostrar (1) y el destino (2) o
forma de apertura (usar _self si desea que la pgina se abra usando la misma ventana
del navegador en donde est el enlace o usar _blank, para abrir la pgina en una nueva
ventana).
- El botn Carta se tiene que vincular con carta.htm, Galera con galeria.htm. De
manera similar completar las otras pginas.

d. Barras de Navegacin.
Una barra de navegacin es un grupo de botones que ofrece vnculos a otras reas de
un sitio Web. Una barra de navegacin suele tener la misma apariencia en todo el sitio
para ofrecer un mtodo de navegacin coherente. Sin embargo, los vnculos de la barra
de navegacin pueden ser diferentes para satisfacer las necesidades de determinadas
pginas.
Para crear una sensacin de navegacin coherente, duplique los smbolos de los
botones mediante las instancias de los smbolos. Si se edita el aspecto o funcionalidad
del smbolo original, todas las instancias asociadas se actualizan automticamente para
reflejar los cambios.
- Cree un smbolo de tipo botn.
- Arrastre una instancia (copia) del smbolo desde el panel Biblioteca de documentos
hasta el espacio de trabajo.
- Seleccione la instancia de botn y elija Men Edicin > Clonar.
- Mantenga pulsada la tecla ALT mientras arrastra la instancia de botn.
- Pulse la tecla de MAY y arrastre el botn para alinearlo en horizontal o vertical. Para
mover las instancias de forma ms precisa, utilice las teclas de flecha.
- Repita los pasos 3 y 4 para crear instancias de botn adicionales.
- Seleccione cada instancia y utilice el Inspector de propiedades para asignarle un texto

nico, una URL y otras propiedades.
MENS EMERGENTES
Los mens emergentes aparecen en el navegador cuando el usuario mueve el puntero sobre un
objeto Web o bien hace clic en l, por ejemplo, en una divisin o zona interactiva.
- Cada elemento del men emergente aparece como una celda de HTML o de imagen. La
celda tiene un estado Arriba, un estado Sobre y texto en ambos estados.
- Es posible incorporar vnculos de URL a elementos del men emergente para la

navegacin y puede crear tantos niveles de submen como desee en los mens
emergentes.
- Se puede utilizar alguna o todas las fichas y editar configuraciones de ficha en cualquier
momento.
- Debe aadir al menos un elemento de men en la ficha Contenido para crear una opcin
de men que se pueda previsualizar en un navegador.
- Para obtener la presentacin preliminar de un men emergente, pulse F12. Los mens
emergentes no se muestran en el espacio de trabajo de Fireworks.
a. Mens emergentes bsicos.

- Seleccione una zona interactiva o divisin que corresponda al rea de activacin del
men emergente.
- Ir al Men Modificar > Men emergente > Aadir men emergente.

Nota: Si no elige una divisin o zona interactiva se mostrara un mensaje:
- Haga clic en el tirador de comportamiento de la divisin y elija Aadir men emergente.
- Haga clic en la ficha Contenido y, a continuacin, haga clic en Aadir men.
- Haga doble clic en cada celda y especifique o seleccione la informacin adecuada de

texto, vnculo y destino. En los campos Vnculo y Destino, especifique informacin
personalizada o seleccione desde los mens mostrados. Al aadir texto en la ltima
lnea de la ventana se agrega una lnea vaca debajo de la misma.
- Pulse la tecla Tabulador para desplazarse entre celdas y las teclas de flecha arriba y
abajo para moverse por la lista de forma vertical.

- Repita los pasos 3 y 4 hasta aadir todos los elementos de men. Para eliminar un
elemento del men, haga clic en el botn Suprimir men.
- Haga clic en Siguiente o Listo, o bien seleccione otra ficha.

- En el rea de trabajo, la zona interactiva o divisin utilizada para crear el men
emergente muestra una lnea azul de comportamiento unida a un contorno del nivel
superior del men emergente.
b. Exportar mens emergentes.

Fireworks genera todo el cdigo CSS o JavaScript (segn la opcin elegida) necesario
para ver mens emergentes en navegadores Web.
Si utiliza cdigo CSS para sus mens emergentes, se exporta a HTML un documento
Fireworks con mens emergentes con cdigo CSS. Puede escribir el cdigo CSS en un
archivo .css externo y exportarlo junto con un archivo mm_css_menu.js a la misma
ubicacin que el archivo HTML.
La alternativa a la utilizacin de cdigo CSS es utilizar JavaScript. Si utiliza JavaScript,

se exporta a HTML un documento Fireworks que contiene mens emergentes y,
adems, se exporta un archivo JavaScript denominado mm_menu.js en la misma
ubicacin que el archivo HTML.
Cuando transfiera los archivos, transfiera el archivo mm_css_menu.js (o mm_menu.js,

para JavaScript) al mismo directorio que la pgina Web que contenga el men
emergente. Para colocar los archivos en otra ubicacin, actualice el hipervnculo que
haga referencia a mm_css_menu.js y el archivo .css (o mm_menu.js) en el cdigo HTML
de Fireworks para reflejar la nueva ubicacin. Se exporta un archivo .css nico para
cada documento que contenga mens emergentes de CSS que se exportan como HTML
e imgenes desde Fireworks.
DIVISIONES Y ZONAS INTERACTIVAS.

Las divisiones son los elementos bsicos para la creacin de interactividad en Adobe
Fireworks. Las divisiones son objetos Web que existen en ltima instancia como cdigo HTML.
Es posible ver, seleccionar y asignar otro nombre mediante la capa de Web del panel Capas.
La divisin "corta" un documento de Fireworks en porciones ms pequeas que se exportan

como archivos independientes. Durante la exportacin, Fireworks crea un archivo HTML que
contiene el cdigo de la tabla que recompone el grfico en un navegador Web.

Dividir una imagen aporta tres ventajas fundamentales:
Se optimizan las imgenes. Se descargan ms rpido.
Aporta interactividad. De modo que las imgenes pueden responder a eventos de ratn.
Facilita las actualizaciones. Para las partes de las pginas Web que cambian con frecuencia
(por ejemplo: fotos y nombres en una pgina sobre el empleado del mes).
a. Mapas de Imgenes.
Una vez insertadas las zonas interactivas adecuadas encima de un grfico, exporte ste
como un mapa de imagen para que se vea en navegadores Web. Cuando se exporta un
mapa de imagen, se generan el archivo grfico y el archivo HTML que contiene la
informacin de mapa para las zonas interactivas y los vnculos URL correspondientes.
Fireworks slo crea mapas de imagen de cliente durante la exportacin.
- Disear la siguiente imagen usando los archivos que se encuentran en la carpeta Per

- Activar la herramienta Zona Interactiva Poligonal, y trazar el rea
que corresponde a los departamentos de Ancash, Ica y Cuzco.
- Crear otras pginas con los nombres indicados en la figura que se muestra a
continuacin, en cada una de ellas colocar un texto Regresar.

- De un clic en la Zona interactiva correspondiente al departamento de Ancash (1), y en
las propiedades establecer las propiedades Vnculo y Destino.
- Completar para Ica (2) y Cuzco (3).
- Abrir la Pgina chavn, y aplicar una Zona Interactiva Rectangular encima del texto
Regresar. Establecer como vnculo hacia la pgina index.htm, destino _self.
CREACIN DE PRESENTACIONES DE DIAPOSITIVAS.

Para crear presentaciones basadas en Adobe Flash o en HTML/SPRY, debe utilizar la ventana
para crear presentaciones Create Slideshow, seleccionar una carpeta que contenga imgenes y
aadir opciones de presentacin.
Modifique las presentaciones aadiendo o eliminando imgenes, o bien incluyendo varios

lbumes en una sola presentacin.
Los diseadores o desarrolladores de Flash pueden crear un reproductor de lbumes

personalizado en Flash para mostrar la salida XML del Creador de lbumes de Adobe Fireworks.

- Ir al Men Comandos > Create Slideshow (Crear presentacin).
- Haga clic en el botn Aadir un lbum (el signo ms), que se encuentra junto a lbumes.
- Seleccione los archivos de imagen que desea incluir en la presentacin y haga clic en
Aceptar.
- Rellene las Propiedades de libro de lbumes y las Propiedades de lbum.
- Seleccione cada uno de los paneles a la derecha para configurar las propiedades de las
presentaciones.
- Elija la ubicacin para la presentacin finalizada en el panel Opciones de exportacin.
- Tras configurar la presentacin, haga clic en Crear.

EXPORTANDO A HTML.
- Activar la pgina index, y luego ir al Men Archivo > Exportar, o pulsar

CTRL+SHIFT+R
- Establecer el nombre index.htm (1), al exportar como HTML e imgenes (2) y activar el
check Colocar imgenes en subcarpeta (3). Repetir el mismo procedimiento
exportando cada una de las otras pginas (mpicchu.htm, chavin.htm, nazca.htm).
- Abrir el archivo index.htm, y observar el funcionamiento de la pgina index, y como esta

se vincula con las pginas de Ica y Cuzco.

Herramienta Divisin
- Abrir Sashimi.png, luego activar la pgina Galera. En esta pgina crearemos algunas
zonas de divisin, y a su vez, la utilizaremos para crear un intercambio de imgenes.
- Ir al Men Comandos > Texto > Lorem ipsum. Con esta opcin podremos aadir un
texto de prueba (1).
- Usando la herramienta Texto, insertar los nmeros 1, 2, 3 y 4.
- Activar la herramienta Divisin, y trazar zonas rectangulares en la imagen central (2) y

en cada uno de los textos (3).
- Ir a la Ventana Fotogramas, y duplicar el primer fotograma, haciendo clic sostenido y

arrastrando hasta el icono Fotograma nuevo/duplicado. Ahora en el Fotograma 2,
recin creado, eliminar la imagen central e importar la imagen Sashimi_galeria_02.jpg.
Quiz tengas que activar Ocultar divisiones y

zonas interactivas, para poder cambiar la
imagen.

- Acercar el puntero del mouse hasta el botn de vnculo de la zona interactiva
correspondiente al nmero 1, y elegir Aadir comportamiento de Intercambiar
imagen.
- En la ventana que se muestra a continuacin, elija la zona correspondiente a la imagen

central (1) y seleccione el nmero de fotograma al que se debe vincular, para este
primer ejemplo seleccione el Fotograma 1 (2).
- Repetir el procedimiento, el nmero 2 vincular con el Fotograma 2, y as sucesivamente.
- Exportar a HTML cada pgina dentro de una carpeta, y probar el funcionamiento de los
enlaces creados para el intercambio de imgenes, y de los botones.

Ejercicio propuesto
- Realizar el diseo de la siguiente pgina. Los archivos los puede encontrar en la carpeta
Aldo
- En la parte izquierda se encuentran una hilera de botones con vnculo hacia una pgina
de prueba. El estado de los enlaces es:
- Email y Registrar, son botones con vnculos hacia las paginas email.htm y
suscripcion.htm.

Contenido
- Concepto. Estructura de un documento HTML: <HTML>, <META>, <HEAD>, <TITLE>,

<BODY>.
- Comentarios
- Espaciados y saltos de lnea: <P> Cambio de prrafo, <BR> Salto de lnea
- <HR> Regla Horizontal, <PRE> Texto preformateado, <CENTER> Centrado de texto e
imgenes
- Insercin de Imgenes: <IMG SRC=...> Inclusin de Imgenes, <IMG ... ALT=...> Texto
alternativo, <IMG .. ALIGN=...> Alineacin de la imagen, <IMG .. BORDER=...> Borde de
la imagen, <IMG .. HEIGHT=... WIDTH=...> Tamao de la imagen, <IMG .. HSPACE=...
VSPACE=...> Espaciado de separacin de la imagen.
ESTRUCTURA DE UN DOCUMENTO
HTML
Conceptos Bsicos
1. World Wide Web (WWW)

Digamos, simplemente, que es un sistema de informacin, el sistema de informacin
propio de Internet. Sus caractersticas son:
- Informacin por hipertexto: Diversos elementos (texto o imgenes) de la

informacin que se nos muestra en la pantalla estn vinculados con otras
informaciones que pueden ser de otras fuentes. Para mostrar en pantalla esta otra
informacin bastar con hacer clic sobre ellos.
- Grfico: En la pantalla aparece simultneamente texto, imgenes e incluso

sonidos.
- Global: Se puede acceder a l desde cualquier tipo de plataforma, usando

cualquier navegador y desde cualquier parte del mundo.

- Pblica: Toda su informacin est distribuida en miles de ordenadores que ofrecen
su espacio para almacenarla. Toda esta informacin es pblica y toda puede ser
obtenida por el usuario.
- Dinmica: La informacin, aunque esta almacenada, puede ser actualizada por el

que la publico sin que el usuario deba actualizar su soporte tcnico.
- Independiente: Dada la inmensa cantidad de fuentes, es independiente y libre.
2. Navegador
Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con
un servidor y comprender el lenguaje de todas las herramientas que manejan la
informacin de Web. Puede decirse que cada casa de software podra tener su
navegador propio, aunque los ms populares sean Netscape e Internet Explorer.
3. Servidor
Se encarga de proporcionar al navegador los documentos y medios que este solicita.
Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un
navegador.
4. HTTP
Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de
World Wde Web utilizan para mandar documentos HTML a travs de Internet.
5. URL
Es el Localizador Uniforme de Recursos, o dicho ms claramente, es la direccin que
localiza una informacin dentro de Internet.
6. HTML
De momento, le basta saber que estas siglas se corresponden con la definicin
"Lenguaje para marcado de hipertexto". Ms claro an, se trata de un lenguaje para
estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en
tags (instrucciones que le dicen al texto como deben mostrarse) y atributos (parmetros
que dan valor al tag).
HTML es el lenguaje con el que se escriben las pginas web. Las pginas web pueden ser
vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir por lo
tanto que el HTML es el lenguaje usado por los navegadores para mostrar las pginas webs al
usuario, siendo hoy en da la interface ms extendida en la red.
Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto.
Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos permite
la introduccin de referencias a otras pginas por medio de los enlaces hipertexto.
El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser
un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a
todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en
un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando
modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se
han presentado ya. El HTML 4.01 es el ltimo estndar a septiembre de 2001.
Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes y
deficiencias que han debido ser superados con la introduccin de otras tecnologas accesorias
capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que
pueden sonaros son las CSS, Java Script u otros.

Otros de los problemas que han acompaado al HTML es la diversidad de navegadores
presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de una
manera unificada. Esto obliga al webmaster a, una vez creada su pgina, comprobar que esta
puede ser leda satisfactoriamente por todos los navegadores, o al menos, los ms utilizados.
Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos
evidentemente otra herramienta capaz de crear la pgina en s. Un archivo HTML (una pgina)
no es ms que un texto. Es por ello que para programar en HTML necesitamos un editor de
textos.
Es recomendable usar el Bloc de notas que viene con Windows, u otro editor de textos sencillo.
Hay que tener cuidado con algunos editores ms complejos como Wordpad o Microsoft Word,
pues colocan su propio cdigo especial al guardar las pginas y HTML es nicamente texto
plano, con lo que podremos tener problemas.
Para cumplir con el objetivo de trabajar con HTML, vamos a utilizar el programa de ADOBE
DREAMWEAVER CS3, solamente a nivel vista cdigo, de esta manera tendremos una ventaja
para estudiar las etiquetas HTML de una manera ms rpida.
- Iniciar el programa de Adobe Dreamweaver CS4, a travs del Men Inicio, en

Programas o de manera directa:
- Si sale alguna ventana inicialmente, canclela, hasta que se muestre:

- Pulsar CTRL+N para crear un nuevo documento.
- Seleccionar Pgina en blanco > HTML > ninguno. En Tipo de Documento seleccionar
Ninguna.
- Configurar el Entorno para que se muestren las siguientes partes:
- Ir al Men Ver > Barras de Herramientas > Desactivar todas las opciones.
Men Ver > Cdigo y diseo.
- Ir al, para que a medida que se realice algn cambio se pueda ir observando el resultado
en la zona inferior.

1
1. Inicio del documento HTML

2. Fin del documento
3. Cabecera (HEAD)
4. Cuerpo (BODY)
Etiquetas de la cabecera o HEAD

1. <meta>
Las metaetiquetas o METATAGS se utilizan para especificar informacin sobre el propio
documento (de ah su nombre). Son utilizadas por los motores de bsqueda para ser
ubicadas al ser buscadas (por ejemplo Altavista o Google).
Ejemplo:
La lnea 3 permite especificar la codificacin de caracteres utilizada al codificar el

documento.
La lnea 4 indica que el autor de la pgina es Pepe Lucho.
Las lneas 5 y 6 establecen las palabras clave en ingls (en) y en espaol (es).
La lnea 7 indica una pequea descripcin de la pgina.
2. <title>
Establece el ttulo de la pgina.

3. <script>
Rutinas de Javascript que son incluidas como funciones que sern llamadas desde otras
zonas del documento.
En el ejemplo, se ha insertado una funcin javascript llamada saludo, la que es invocada

al cargarse la pgina (onLoad).
4. <style>
Estilos definidos a usar en el actual documento.
El estilo definido aqu, establece un

color amarillo como fondo de la pgina.

Etiquetas del cuerpo o BODY
1. Argumentos usados en el BODY
- bgcolor: establece el color de fondo del documento.

1
Lo mejor de trabajar con un editor

especializado de documentos HTML,
es que presentan ayudas visuales de
trabajo.
El argumento bgcolor soporta el color como cdigo hexadecimal (1), o el nombre del
color en ingls.
<body bgcolor=yellow >
- Pulsar CTRL+S para salvar el documento, gurdelo en una carpeta en el Escritorio de

nombre PEGASUS y coloque de nombre al documento inicio.
- Por defecto se guardar como inicio.html
- Luego pulsar la tecla F12 para hacer una previsualizacin en el navegador por defecto
de su equipo.
- background: establece una imagen de fondo, que de ser muy pequea, se mostrar en
forma de mosaico.

Para que pueda cargar la imagen fondo_01.gif en el fondo del documento, debe copiar
este archivo a la carpeta PEGASUS.
- text: establece el color por defecto o predeterminado del texto del documento.
- link: establece el color de los hipervnculos o enlaces.
- alink: establece el color de los enlaces activos.
- vlink: establece el color de los enlaces visitados.
En el documento, se establece el color de texto (text) a Rojo, el color de los enlaces (link) a
Azul, el color del enlace activo (alink) a Verde y el color de los enlaces ya visitados (vlink) a
Rosado.
2. Etiquetas usadas en el formato de prrafo

- <h1>: establece encabezados. Existen hasta 6 niveles de encabezados: <h1>, <h2>,
<h6>.

- <br>: establece un salto de lnea.
- <p>: determina los saltos de prrafo. El argumento align permite alinear el texto que
forma el prrafo.
- <pre>: establece un preformateo del texto, de tal manera que tal como se escribe, se
visualizar en el navegador.

3. Etiquetas usadas en el formato de textos
- <font>: etiqueta que establece las caractersticas del texto (fuente, tamao y color).
- <b> Texto </b>: etiqueta que formatea a NEGRITA.
- <i> Texto </i>: etiqueta que formatea a CURSIVA.
- <u> Texto </u>: etiqueta que formatea a SUBRAYADO.
- <sub>Texto </sub>: etiqueta que formatea a SUBNDICE.
- <sup>Texto </sup>: etiqueta que formatea a SUPERNDICE.

Ejercicio propuesto
Crear el siguiente documento, y guardarlo con el nombre de ejercicio_01.htm

4. Etiquetas usadas en listas
Se tienen dos tipos de listas que pueden ser usadas en documentos HTML, las listas
ordenadas y las listas desordenadas.
- Para las Listas el argumento type permite definir los nmeros o vietas a usar en la lista.

5. Etiquetas usadas en la insercin de imgenes
La etiqueta img permite insertar imgenes, la que a su vez depende de los atributos:
- src: especifica el origen del archivo grfico (GIF, PNG o JPEG).
- alt: rtulo que se muestra cuando el puntero se halla encima de la imagen, o cuando no
carga la imagen por alguna falla.
- width: establece el ancho de la imagen.
- height: establece la altura de la imagen.

El texto u otras imgenes con las que puedan estar cerca las imgenes, pueden ser
manejados a travs de argumentos de alineacin:
- Cuando la imagen funciona como hipervnculo, se muestra un borde. Si no se desea

mostrar dicho borde, se debe usar el argumento border a 0.

- Se puede establecer la distancia horizontal (vspace) y vertical (hspace) de la imagen
con otros elementos de la pgina, sea textos u otras imgenes.
vspace = 30
hspace = 20

Ejercicio.
Disear la pgina siguiente, y luego guardarla con el nombre de personal.html.
Mi Web Personal Microsoft Internet Explorer

Contenido
- Hipervnculos.
o Enlaces hacia zonas del mismo documento.
o Hacia pginas del mismo sitio.
o Hacia pginas de Sitios externos.
o Hacia correos electrnicos.
o Hacia archivos
- Rutas absolutas y relativas.
- Etiquetas usadas en la creacin de Tablas.
- Formularios
HIPERVNCULOS
La caracterstica principal de una pgina Web es que podemos incluir Hiperenlaces. Un
Hiperenlace es un elemento de la pgina que hace que el navegador acceda a otro recurso, otra
pgina Web, un archivo, etc.
- Abrir la pgina creada en el ejercicio anterior, personal.html.
- Crear las pginas siguientes mis_aficiones.html y mis_favoritos.html:
Regresar

Regresar
1. Enlaces hacia zonas del mismo documento.

- En la pgina personal.html, insertar un anclaje con nombre (1) :
<a name=inicio></a>
Y definir un enlace en el texto Subir (2).

<a href=#inicio>Subir</a>
2. Enlaces hacia pginas del mismo Sitio.

- En la pgina personal.html, crearemos un enlace para cada imagen que lo direccione
hacia las pginas mis_aficiones.html y mis_favoritos.html, respectivamente.

- Abrir la pgina mis_aficiones.html y crear el enlace para retornar a la pgina
personal.html, y de igual manera con mis_favoritos.html
- El estilo text-decoration permite que no se muestre el tpico subrayado sobre el

enlace.
3. Enlaces hacia pginas de Sitio externos.

- Abrir la pgina mis_favoritos.html. En cada una de las imgenes crearemos un enlace
hacia la URL respectiva de cada sitio.
FACEBOOK http://www.facebook.com
YOUTUBE http://www.youtube.com
GOOGLE http://www.google.com
- El argumento target permite que los enlaces se abran en una nueva ventana (_blank) o
en la misma ventana (_self).
4. Enlaces hacia correos electrnicos.
- Abrir la pgina mis_aficiones.html, crearemos un enlace en la imagen que permita

crear un nuevo mensaje en el cliente de correo predeterminado (ej. Outlook).
5. Enlaces hacia archivos.

- En la pgina mis_aficiones.html, crearemos un par de enlaces que nos permitan abrir
documentos electrnicos creados en Acrobat Reader o descargar archivos.

RUTAS ABSOLUTAS Y RELATIVAS
1. Rutas Absolutas
Las rutas absolutas son indicadas mediante la URL completa del documento vinculado.
<a href="http://www.sise.edu.pe"> Enlace</a>
Para vincular un documento situado en otro servidor, o sitio web, es preciso utilizar una
ruta absoluta.
Aunque tambin podemos emplear las de rutas absolutas para llamar o localizar
archivos locales (de documentos en el mismo sitio), se desaconseja emplear este
mtodo, puesto que si mueve el sitio a otro dominio (lugar, carpeta o servidor) se
rompern todos los vnculos de las rutas absolutas. Se recomienda el utilizar rutas
relativas para vnculos locales, puesto que estos vnculos nos permiten una mayor
flexibilidad, en caso de que necesitemos mover los documentos dentro del sitio.
2. Rutas Relativas
Las rutas relativas a los documentos son las ms adecuadas para emplear con vnculos
locales en la mayora de los sitios Web. Son especialmente tiles cuando el documento
actual y el documento con el que se establece el vnculo se hallan en la misma carpeta.
Tambin es posible usar una ruta relativa al documento para crear un vnculo con un
documento en otra carpeta, pero deberemos especificar la ruta empleando de la
jerarqua de carpetas desde el documento actual hasta el vinculado.
Para establecer un vnculo con un documento de la misma carpeta, indicaremos

solamente el nombre del archivo.
<a href="enlaces.html">Enlaces</a>
Para realizar un vnculo con una pgina o un archivo situado por debajo en el rbol se
deber indicar los nombres de las subcarpetas seguidos de /, y finalizando con el nombre
del archivo.
<a href="documentos/detalles.doc">Documento Word</a>
<a href="documentos/excel/tabla.xls">Documento Excel</a>
Para establecer un vnculo con un documento que se halla por encima en el rbol debes
introducir ../para cada nivel que queramos subir.

<a href="../indice.htm">ndice</a>
Tenemos la posibilidad de combinar las dos ltimas operaciones, subiendo por el rbol y
luego bajando por otra rama
<a href="../general/menu.htm">Enlace</a>
ETIQUETAS USADAS EN LA CREACIN

DE TABLAS
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos
contenidos.
En un principio nos podra parecer que las tablas son raramente tiles y que pueden ser
utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma
organizada. Nada ms lejos de la realidad.
Hoy, gran parte de los diseadores de pginas basan su maquetacin en este tipo de artilugios.
En efecto, una tabla nos permite organizar y distribuir los espacios de la manera ms optima.
Nos puede ayudar a generar texto en columnas como los peridicos, prefijar los tamaos
ocupados por distintas secciones de la pgina o poner de una manera sencilla un pie de foto a
una imagen.
Puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero, si
deseamos crear una pgina de calidad, tarde o temprano tendremos que vrnoslas con ellas y
nos daremos cuenta de las posibilidades nos ofrecen.
<table> </table> Define la creacin de tablas.
<tr> </tr> Define la creacin de una fila.
<td> </td> Define la creacin de una celda.
- En un nuevo documento de nombre tablas.html, escriba dentro del body:

- Modificar los argumentos.

Veamos a continuacin algunos atributos tiles para la construccin de nuestras tablas.
Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una lnea:
align Justifica el texto de la celda del mismo modo que si fuese el

de un prrafo.
valign Podemos elegir si queremos que el texto aparezca arriba
(top), en el centro (middle) o abajo (bottom) de la celda.
bgcolor Da color a la celda o lnea elegida.
bordercolor Define el color del borde.
Otros atributos que pueden ser nicamente asignados a una celda y no al conjunto de celdas de
una lnea son:
background Nos permite colocar un fondo para la celda a partir de un

enlace a una imagen.
height Define la altura de la celda en pixels o porcentaje.
width Define la anchura de la celda en pixels o porcentaje.
colspan Expande una celda horizontalmente.
rowspan Expande una celda verticalmente.
Los atributos CELLPADING y CELLSPACING nos ayudaran a dar a nuestra tabla un aspecto
ms esttico. En un principio puede parecernos un poco confuso su uso pero un poco de
prctica ser suficiente para hacerse con ellos.
En la siguiente imagen podemos ver grficamente el significado de estos atributos.
Los atributos ROWSPAN y COLSPAN son tambin utilizados frecuentemente. Gracias a ellos es
posible expandir celdas fusionando stas con sus vecinas. El valor que pueden tomar estas
etiquetas es numrico. El nmero representa la cantidad de celdas fusionadas.
As, <TD COLSPAN="2">
Fusionara la celda en cuestin con su vecina derecha.
Esta celda tiene un COLSPAN="2"
Celda normal Otra celda
Del mismo modo, <TD ROWSPAN="2">

Celda
Esta celda tiene ROWSPAN="2", Normal
por eso tiene fusionada la celda de
abajo. Otra celda
normal
Expandir la celda hacia abajo fusionndose con la celda inferior.

Ejercicios.
En un nuevo documento HTML, disear la siguiente pgina de nombre inicio.html.
Instituto de Educ. Superior Santa Rosa
1.
2. dd
3. dd
4. dd
5. dd
6. dddd

El enlace SUBIR AL INICIO DE LA PAGINA permite subir al inicio del documento.
HORARIOS RECURSOS ENLACES, son hipervnculos que permiten abrir las pginas:
- Recursos.html , pgina con fondo color amarillo y cabecera de primer nivel color azul y
como texto: Recursos Adicionales
- Enlaces.html , pgina con imagen de fondo: ECOLOGICO.JPG, cabecera de primer

nivel color rojo y como texto: Enlaces en la Web
- Horarios.html , pgina con el siguiente diseo
HORARIOS
8 11
12
9
Regresar
FORMULARIOS
Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas
pginas web. Son muy utilizados para realizar bsquedas o bien para introducir datos
personales por ejemplo en sitios de comercio electrnico. Los datos que el usuario introduce en
estos campos son enviados al correo electrnico del administrador del formulario o bien a un
programa que se encarga de procesarlo automticamente.
Desde luego, este nuevo aspecto resulta primordial para gran cantidad de acciones que se
pueden llevar a cabo mediante el Web: Comprar un articulo, rellenar una encuesta, enviar un
comentario al autor...
Usando HTML podemos nicamente enviar el formulario a un correo electrnico. Si queremos

procesar el formulario mediante un programa la cosa puede resultar un poco ms compleja ya
que tendremos que emplear otros lenguajes ms sofisticados. En este caso, la solucin ms
sencilla es utilizar los programas prediseados que nos proponen un gran nmero de servidores
de alojamiento y que nos permiten almacenar y procesar los datos en forma de archivos u otros
formatos. Si nuestras pginas estn alojadas en un servidor que no propone este tipo de
ventajas, siempre se pueden recurrir a servidores de terceros que ofrecen este u otro tipo de
servicios gratuitos para webs. Por supuesto, existe otra alternativa que es la de aprender
lenguajes como ASP o PHP que nos permitirn, entre otras cosas, el tratamiento de formularios.

Los formularios son definidos por medio de las etiquetas <FORM> y </FORM>. Entre estas dos
etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta
etiqueta <FORM> debemos especificar algunos atributos:
action El formulario puede enviar los datos a una direccin de correo

electrnico:
<form action=mailto:vsanchez@sise.edu.pe>
Tambin puede enviarlos a un programa:

<form action=proceso.php>
method Puede asumir el valor GET o el valor POST, y definen la manera en la

cual los datos son transferidos al servidor.
enctype Este atributo est reservado para que la informacin viaje en forma
encriptada a travs de Internet
Elementos del formulario
1. Campo de Texto
- Permiten ingresar datos al formulario.
Ejemplo:
- Un tipo especial de Campo de Texto permite ocultar los caracteres digitados mostrando
un carcter especial. Es ideal para ingresar claves o passwords.

2. Campo Oculto
- Es usado para guardar valores entre pginas cuando se crean aplicaciones complejas.
3. rea de Texto
- Usado cuando se desea que el usuario ingrese una gran cantidad de texto, como
observaciones y comentarios.
4. Casilla de Verificacin
- Este tipo de elementos pueden ser activados o desactivados por el visitante por un
simple clic sobre la caja en cuestin.
5. Botn de Opcin
- Existe otra alternativa para plantear una eleccin, en este caso, obligamos al usuario a
elegir nicamente una de las opciones que se le proponen.

6. Cuadro de Lista
- Las listas de opciones son ese tipo de mens desplegables que nos permiten elegir una
(o varias) de las mltiples opciones que nos proponen.
7. Botones
- Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor,
el navegante ha de validarlo por medio de un botn previsto a tal efecto.

Ejercicios.
Elaborar la pgina: registros.html, con la siguiente apariencia:
El Sexo est representado por RadioButtons.
El Grado de Instruccin es una Lista de Opciones con los siguientes elementos:

Primaria, Secundaria, Superior Tcnica y Superior Universitaria, en este orden.
Secundaria debe ser el valor seleccionado de manera predeterminada.
Para recibir Boletines se emplea una Caja de Validacin.
Las consultas son enviadas a travs de un Texto Largo.
El botn ENVIAR se encarga de enviar los datos al correo electrnico:

admin@ iesrosa.edu.pe El botn LIMPIAR limpia los datos del formulario.
En la pgina se presenta una tabla que permite organizar adecuadamente el contenido

de los elementos usados en la elaboracin del formulario.

Contenido
- Javascript. Diferencias con el lenguaje Java.

- Conceptos. Diferencias con JAVA.
- Dnde y cmo incluir las rutinas de Javascript.
- Sintaxis y estructuras de control.
- Estructuras de Control
- Principales objetos y eventos en Javascript.
o Window
o History
o Navigator
o Document
JAVASCRIPT
Todos los que hasta ahora hayan seguido el curso de HTML, se habrn dado cuenta de una
cosa: crear un documento HTML es crear algo de carcter esttico, inmutable con el paso del
tiempo. La pgina se carga, y ah termina la historia. Tenemos ante nosotros la informacin que
buscbamos, pero no podemos INTERACTUAR con ella.
As pues, como solucin a este problema, nace Javascript. Y qu es Javascript?. Se trata de un

lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseado
especficamente para el desarrollo de aplicaciones cliente-servidor dentro del mbito de Internet.
Los programas Javascript van incrustados en los documentos HMTL, y se encargan de realizar
acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear
animaciones, comprobar campos...
Diferencias entre Java y Javascript

Queremos que quede claro que Javascript no tiene nada que ver con Java, salvo en sus
orgenes, como se ha podido leer hace unas lneas. Actualmente son productos totalmente
distintos y no guardan entre s ms relacin que la sintaxis idntica y poco ms. Algunas
diferencias entre estos dos lenguajes son las siguientes:
Compilador. Para programar en Java necesitamos un Kit de desarrollo y un compilador.

Sin embargo, Javascript no es un lenguaje que necesite que sus programas se
compilen, sino que stos se interpretan por parte del navegador cuando ste lee la
pgina.

Orientado a objetos. Java es un lenguaje de programacin orientado a objetos.
Javascript no es orientado a objetos, esto quiere decir que podremos programar sin
necesidad de crear clases, tal como se realiza en los lenguajes de programacin
estructurada como C o Pascal.
Propsito. Java es mucho ms potente que Javascript, esto es debido a que Java es un
lenguaje de propsito general, con el que se pueden hacer aplicaciones de lo ms
variado, sin embargo, con Javascript slo podemos escribir programas para que se
ejecuten en pginas web.
Estructuras fuertes. Java es un lenguaje de programacin fuertemente tipado, esto

quiere decir que al declarar una variable tendremos que indicar su tipo y no podr
cambiar de un tipo a otro automticamente. Por su parte Javascript no tiene esta
caracterstica, y podemos meter en una variable la informacin que deseemos,
independientemente del tipo de sta. Adems, podremos cambiar el tipo de informacin
de una variable cuando queramos.
Otras caractersticas. Como vemos Java es mucho ms complejo, aunque tambin

ms potente, robusto y seguro. Tiene ms funcionalidades que Javascript y las
diferencias que los separan son lo suficientemente importantes como para distinguirlos
fcilmente.
Dnde y cmo incluir las rutinas de Javascript.
1. En el body del mismo documento

- Se pueden insertar en cualquier parte del documento, entre las etiquetas
<script></script>. En el ejemplo, se imprime en el documento el texto que se halla
entre parntesis.
2. Haciendo referencia a una funcin definida en la cabecera

- Se definen funciones en la zona de la cabecera, que luego son llamadas por el nombre y
usando algn evento. En el ejemplo, la funcin abrir muestra un mensaje de alerta
cuando se cargue (evento onLoad) el cuerpo del documento web (body).

3. En un documento externo
- Se pueden agrupar las funciones creadas en Javascript en un documento, de tal forma
que el documento HTML haga referencia a su ubicacin.
- Si est utilizando un editor simple de texto, solamente tendr que guardar el archivo con
extensin js, si de lo contrario utiliza Dreamweaver, lo puede hacer pulsando CTRL+N,
luego elegir Pgina en blanco > Javascript, luego clic al botn Crear.
Sintaxis y Estructuras de control

- Es case-sensitive, es decir, reconoce maysculas de minsculas.
- Las variables permiten almacenar cualquier tipo de dato cambiante, y no requieren ser
declaradas. El nombre usado que les es asignado debe ser conforme a ciertas reglas
(debe empezar con una letra o ("_"); los caracteres siguientes pueden ser nmeros (0-
9), letras maysculas o letras minsculas).
- Los Operadores Aritmticos que usa son similares a los usados en el lenguaje JAVA.
NOMBRE OPERADOR EJEMPLO

Suma + 5+2
Resta - 63
Multiplicacin * 8*3
Divisin / 6/2
Mdulo o Residuo % 7%2
Incremento ++ 2++
Decremento -- 3--

Al igual que los Operadores de Comparacin:

Mayor > 5>2
Menor < 6<3
Igual == 8 == 8
Diferente != 7 !=3
Mayor o igual >= 9 >=7
Menor o igual <= 8 <= 2
Y que los Operadores Lgicos:

Y Lgico && (5 > 2) && (4==2)
O Lgico || (3 != 2) || (2 > 2)
Negacin ! ! (3 == 2)
- Veamos un pequeo ejemplo, en un nuevo documento HTML, crear el siguiente diseo:
cantidad
precio
calcular
importe
- Observar que el botn calcular es un botn simple, que al ser pulsado llama a la funcin
calcular que ser definida en la cabecera.

- La instruccin var es utilizada para declarar variables locales.
- Cada instruccin termina con un punto y coma (;).
- Como se tratan de elementos que no estn contenidos dentro de un formulario,

solamente es necesario hacer referencia al nombre de la caja de entrada (ej. cantidad)
y a su contenido (ej. value).
- parseFloat convierte el valor contenido en una caja de entrada, de texto o cadena a

valor numrico con decimales (usar parseInt para valores enteros).
- Para alguien con conocimientos de Programacin en JAVA, encontrar que son

similares a las usadas por Javascript, como:
Estructuras de Decisin
if (Expr.lgica){
.bloque de acciones verdaderas;
}else{
.bloque de acciones falsas;
}
Estructuras Selectivas Mltiples
switch(variable){
case Valor1:
bloque de acciones1;
break;
case Valor2:
break;
default:
bloque de acciones opcionales;
}
Estructuras Repetitivas
for(inicializacin; condicin; incrementos){

bloque de acciones a repetir;
}

while(Expr.lgica){
}
- Veamos algunos ejemplos, abrir la pgina condicionales.html, escribir la funcin que

ser llamada por el botn evaluar para calcular el promedio y mostrar la condicin del
alumno (aprobado o desaprobado).
- Abrir la pgina selectivas.html, y completar las rutinas que permitan el ingreso de un

nmero entero (del 1 al 7) y que se muestre el nombre del da de la semana
correspondiente.

Principales objetos y eventos en Javascript.
1. Window
- Hace referencia a la ventana actual.
- open es un mtodo que permite abrir una URL dentro de una ventana, en donde se
puede especificar sus dimensiones y ubicacin. Tambin puede ser usado en enlaces
para abrir pginas dentro de ellas.

- status es una propiedad que permite mostrar un string en la barra de estado del
navegador.
- prompt es un mtodo que muestra una caja de entrada para que el usuario ingrese un
texto.
- alert es un mtodo que muestra un mensaje.

Este ejemplo muestra un cuadro de entrada, en donde el usuario ingresa un nombre y es
almacenado en una variable nombre, luego una condicional se encarga de consistenciar
si el usuario ingreso algo, mostrando mensajes diferentes en cada situacin.
2. History
- Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado
navegando, es decir, guarda las referencias de los lugares visitados.
3. Navigator
- Este objeto simplemente nos da informacin relativa al navegador que est utilizando el
usuario.
4. Document
- El objeto document es el que tiene el contenido de toda la pgina que se est
visualizando. Esto incluye el texto, imgenes, enlaces, formularios, etc. Gracias a este
objeto vamos a poder aadir dinmicamente contenido a la pgina, o hacer cambios,
segn nos convenga.
Imprimir sobre el documento la fecha actual del sistema.

En una nueva pgina HTML crear una tabla de 3 filas y 3 columnas, y en una de las
primeras celdas insertar una etiqueta de divisin (<div>) con el id fecha.
Crear la funcin que utilice algunos mtodos de la clase Date, y Array.

Llamar a la funcin fechaActual al cargar el documento.
Rollover de imgenes
Insertar dos imgenes (productos_off, contactenos_off).

Contenido
- Introduccin a Adobe Dreamweaver CS4.

- El Entorno de Trabajo.
- Configuracin de un Sitio Local.
- Creacin de Documentos HTML.
- Texto: Caractersticas.
- Listas,
- Caracteres especiales.
- Estilos CSS: creacin y gestin de estilos.
- Hojas de Estilo.
INTRODUCCIN A ADOBE
DREAMWEAVER CS4
Dreamweaver CS4 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver CS3 permiten agregar rpidamente diseo y
funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se
puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.,
de una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con
mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los
documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo
HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un
editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los
elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia
profesional para la pgina.

Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y
que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe
Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden
ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog
Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser
gratuitos.
Novedades
Vista en vivo
Dreamweaver CS4 permite disear pginas Web en condiciones reales de navegador con la
nueva Vista en vivo, al tiempo que mantiene el acceso directo al cdigo. Los cambios realizados
en el cdigo se reflejan de inmediato en la pantalla mostrada.
Sugerencias para el cdigo de los frameworks Ajax y JavaScript

Ahora puede escribir cdigo JavaScript con mayor rapidez y precisin y con compatibilidad
mejorada para objetos centrales y tipos de datos simples de JavaScript. Tambin puede
aprovechar la funcionalidad ampliada de Dreamweaver mediante la incorporacin de frameworks
JavaScript muy utilizados, como jQuery, Prototype y Adobe Spry.
Archivos relacionados y navegador de cdigo

Dreamweaver CS4 le permite administrar de manera eficiente los distintos archivos que
conforman las pginas Web de hoy en da. Haga clic en cualquier archivo relacionado para ver
su cdigo fuente en la vista Cdigo y la pgina padre en la vista Diseo. La nueva funcin de
Navegador de cdigo muestra todas las fuentes de cdigo que afectan a la seleccin actual,
como reglas CSS (hojas de estilos en cascada), server-side includes, funciones JavaScript
externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.
InContext Editing
Puede permitir a los usuarios finales realizar modificaciones sencillas en sus pginas Web sin
necesidad de recurrir a usted ni utilizar software adicional. Como diseador de Dreamweaver,
puede limitar los cambios a pginas especficas, regiones determinadas e incluso opciones de
formato personalizadas de manera rpida y sencilla.
Prcticas recomendadas en relacin con CSS

El inspector de propiedades de Dreamweaver CS4 permite crear nuevas reglas CSS y ofrece
explicaciones claras y sencillas del lugar que ocupa cada propiedad en la cascada de estilos.
Conjuntos de datos HTML

Puede incorporar la potencia de los datos dinmicos a sus pginas Web sin necesidad de invertir
tiempo en el aprendizaje de bases de datos o de la codificacin XML (Extensible Markup
Language: lenguaje de marcado extensible). Los conjuntos de datos de Spry reconocen el
contenido de una tabla HTML sencilla como una fuente de datos interactiva.
Objetos inteligentes de Adobe Photoshop

Inserte cualquier documento PSD (Photoshop Data File: archivo de datos de Photoshop) de
Adobe Photoshop en Dreamweaver para crear un objeto inteligente de imagen. Los objetos
inteligentes estn estrechamente vinculados con el archivo de origen. Puede realizar cualquier
cambio en la imagen de origen y actualizar la imagen en Dreamweaver sin abrir Photoshop.
Consulte Utilizacin con Photoshop.
Integracin con Subversion

Dreamweaver CS4 integra el software Subversion, un sistema de control de versiones de
cdigo abierto que proporciona operaciones de desproteccin y proteccin de archivos ms
slidas. Puede actualizar el sitio y registrar las modificaciones directamente desde
Dreamweaver.

Nueva interfaz de usuario
Utilice los diferentes componentes de Adobe Creative Suite 4 de forma ms rpida y racional
con un diseo comn de interfaz de usuario. Cambie rpidamente entre entornos de trabajo con
el conmutador de espacios de trabajo.
Funciones que ya no se utilizan

En Dreamweaver CS4 han dejado de utilizarse las siguientes funciones:
Lneas de tiempo
Servicios Web
Modo de diseo
Vista Mapa del sitio
Compatibilidad con Java Bean
Elementos de Adobe Flash (Visor de imgenes)
Texto de Adobe Flash y botones de Adobe Flash
Comportamientos de servidor y juegos de registros ASP.NET y JSP
EL ENTORNO DE TRABAJO
Para iniciar el programa podemos usar cualquiera de las siguientes formas:
1era Forma (clsica)

2da Forma
Cargando el ejecutable del programa (Men Inicio > Ejecutar: DREAMWEAVER ).
El Entorno de trabajo ha sufrido ciertos cambios a comparacin de la versin anterior.
7. Barra de Men.
8. Barra Documento
9. Panel Insertar
10. Men de Paneles
11. Documento
12. Panel de Propiedades

Aunque esta vista no es definitivo, ya que se puede elegir el rea de trabajo segn sea
requerido.
Configuracin de un Sitio Local.

Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar
o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que
va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener
las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro
de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar.
Esto es lo que se conoce como sitio local.
Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo
que equivale a publicar el sitio, de modo que la gente podr verlo en Internet.
La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener

los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc.
Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que
los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL
genrica.
Por ejemplo, si escribiramos la direccin genrica http://www.peru.com en el navegador, ste

intentara cargar la pgina http://www.peru.com/index.htm, por lo que se producira un error en
el caso de que no existiera ninguna pgina con el nombre index.htm.
1. Si es la primera vez que inicia el programa, se mostrar una ventana solicitando que
configure un Sitio Local, para este caso de clic a Cancelar. Si est usando un equipo de
acceso pblico, quiz de manera predeterminada se muestren los archivos de algn
Sitio creado por otra persona.

2. En cualquiera de las dos situaciones, ir al
Men Sitio > Administrar Sitios, y
elimine o conserve aquellos Sitios que Ud.
desee.
3. De clic a Nuevo, luego del men desplegable, elija Sitio.
4. Activar la Configuracin Bsica (pestaa Bsicas), y digitar como nombre del sitio
VETERINARIA.

5. La opcin para usar tecnologa de servidor se activa cuando tenga que disear una
pgina de tipo PHP, ASP, JSP, etc. Para nuestro caso no lo active.
6. La creacin y modificacin de los documentos que sern creados sern almacenados

inicialmente en una carpeta de nombre Veterinaria, ubicada en el Escritorio de su
equipo.
7. Como todava no dispones de un servicio de Hosting (gratuito o dedicado), entonces no

configures nada en la opcin Conexin al Servidor Remoto.

8. Luego se muestra un Resumen con la configuracin creada.
9. Por ltimo, de clic a Listo.
10. Observe su Ventana Archivos (si esta oculta pulse F8).
Tipo de Vista (Local o Remota)

Nombre del Sitio
Ubicacin

11. Ingresar a la carpeta archivos y copie todos los archivos que se hallan dentro, hacia su
carpeta VETERINARIA que se encuentra en su Escritorio.
D clic derecho, Nueva carpeta y digite: imagenes.
12. Luego seleccione todos los archivos grficos y muvalos hacia la carpeta imgenes.
13. Esto permitir disponer de una mejor organizacin sobre los archivos que forma el sitio a
crear.

Creacin de Documentos HTML.
1. Pulsar CTRL + N para crear una nueva pgina.
2. En la ventana que se visualiza, elegir PAGINA EN BLANCO, tipo de pgina: HTML ,

Diseo: NINGUNO. Clic en CREAR.
3. Cambiar el titulo de la pagina: VETERINARIA 2 DE MAYO
4. Para modificar las propiedades de la pgina, de clic al botn PROPIEDADES DE

PGINA en la ventana PROPIEDADES, o de clic derecho a la pgina y elija
PROPIEDADES DE LA PAGINA. Cambiar el color de fondo a un color GRIS CLARO.

5. Pulsar CTRL + S para guardar la pagina. Por defecto se guardar en la carpeta
VETERINARIA, y nmbrela como index. Observar las vistas activas.
- Vista CDIGO: se visualiza el lenguaje HTML (HyperText MarkUp Language), es

usado por diseadores avanzados con la finalidad de insertar rutinas de scripts, o
para a voluntad los elementos del documento.
- Vista DIVIDIR: se observa el lenguaje HTML en la parte superior, y la vista DISEO

en la parte inferior.
- Vista DISEO: usado para insertar de manera directa los objetos en el documento
web. ACTIVE ESTE BOTN PARA TRABAJAR EN ESTA VISTA.

Establecer propiedades del documento: color e imagen de
fondo, tipo y estilo de fuente.
1. Crear una nueva pgina HTML en Blanco y establecer las siguientes propiedades de
pgina:
- Tipo de Fuente: Verdana . Estilo: Cursiva
- Tamao: 12
- Color del texto: #000066 (Azul Oscuro)
- Color de Fondo: (amarillo claro)
Digitar el siguiente texto: Escriba en Titulo: VETERINARIA 2 DE MAYO
Pulse SHIFT + Enter, para aplicar un salto de lnea
2. Pulse CTRL + S para guardar el documento, con el nombre de page1.html
3. Cree un nuevo documento HTML y configure sus propiedades con los siguientes
valores:
Titulo: LAS TIENDAS DE MASCOTA Y LOS INSECTOS

Fuente: Courier New Negrita (B), Cursiva (I)
Tamao: 14 pixeles. Color de texto: azul oscuro
Color de fondo: celeste claro.
Guardar con el nombre de page2.html
Abrir el archivo de texto que se encuentra en la carpeta de recursos:
contenido.txt, y copiar el primer bloque hacia el nuevo documento.
Imagen de Fondo: huella.jpg

4. Guarde los cambios pulsando nuevamente CTRL+S.
5. Pulse F12 para realizar visualizar la pgina en el Navegador predeterminado.
Texto: Caractersticas.
En esta nueva versin, se mantiene un riguroso vnculo con los estilos, por lo que el formato de
un texto determinado implicara crear un nuevo estilo.
- Seleccionar el texto a formatear.
- Activar el botn CSS, ubicado a la izquierda. Al clicar sobre Editar Regla, se

podr cambiar el estilo del bloque de texto agregando un estilo solo para el
documento actual, o creando una hoja de estilos que guarde el estilo para ser
utilizado en muchas pginas del sitio.

- Seleccione los textos siguientes y aplicar un tipo de fuente del grupo VERDANA.
Luego completar el formato segn se visualiza:
a. Listas, Caracteres especiales.
- Seleccione el primer elemento de la lista que va a crear.
- En el Panel de Propiedades, de un clic sobre el botn LISTA SIN ORDENAR.
- Ubicarse al final del elemento, y al pulsar ENTER, se genera el siguiente elemento.
- Se puede cambiar el tipo de vieta al hacer clic sobre el botn Elemento de la lista.
- En el Panel de Propiedades, tambin se podra haber activado el botn LISTA

ORDENADA.

- Y tambin se puede cambiar el estilo numrico por el de letras.
b. Estilos CSS: creacin y gestin de estilos.
Los estilos CSS estn en hojas de estilo de actualizacin automtica (Hojas de Estilo en
Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el
color o el tamao, de modo que no sea necesario asignar estos atributos uno a uno cada
vez que se desee repetir la asignacin de esos mismos valores a otras partes del texto.
- Configurar un sitio local de nombre TURISMOPERU. Luego abrir la pgina

tumbes.html y crear un estilo de nombre rotulo (Arial, Negrita, Cursiva, tamao 18 y
color Rojo), en la ventana CSS.
- Establecer el nombre del estilo:
- Configurar los valores solicitados para el estilo:

- Seleccionar los textos que sern afectados por el estilo creado y modificar la
propiedad estilo.
- Abrir la pgina piura.html y crear el estilo subtitulo (Arial, Negrita, Cursiva, tamao 18
y color Azul). Luego establecer sobre Ubicacin e Historia.

Hojas de Estilo
Podemos exportar estilos que se encuentren incrustados en la pgina HTML a una nueva hoja
de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar.
Se abrir el cuadro de dilogo Exportar estilos como archivo CSS que te permitir guardar todos
los estilos incrustados en un nuevo archivo CSS.
Esta opcin es muy til si tienes los estilos incrustados en una pgina y queremos utilizarlos en
otras tambin. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la
adjuntamos en cualquier pgina que queramos utilizarlos.
- Pulsar CTRL+N para crear un nuevo documento Pgina en blanco > CSS, y
guardar con el nombre de estilos.css
- Abrir la pgina tumbes.html, y Adjuntar la hoja de estilos creada.

- Estando seleccionada estilos.css, crear un nuevo estilo de nombre ttulo:
- Seleccionar el ttulo y aplicarlo desde las propiedades.
- Activar la pgina libertad.html, adjuntar la hoja estilos.css, y aplicar el estilo

creado.

Contenido
- Imgenes: Tipos compatibles para la Web. Insercin de Imgenes.
- Hipervnculos: Tipos. Creacin. Destino.
- Imgenes de Sustitucin (Rollover).
- Mapas de imgenes.
- Elementos Flash: Pelculas, Botones y Texto Flash.
IMGENES
a. Tipos compatibles para la Web.
El componente grfico de las pginas web tiene mucha importancia, es el que hace que
estas sean vistosas y el que nos permite aplicar nuestra creatividad para hacer del
diseo de sitios una tarea agradable. Es tambin una herramienta para acercar los sitios
al mundo donde vivimos, sin embargo, es tambin el causante de errores graves en las
pginas y hacer de estas, en algunos casos, un martirio para el visitante.
Cuando usar gif?

El formato gif es ideal para imgenes muy simples: trazos de lneas, dibujos y textos en
blanco y negro o con pocos colores. Tambin es el nico formato de los 3 que permite
animaciones. Y es ampliamente soportado en los browsers.
Cuando usar png?

Se usa para el mismo tipo de imgenes que los gif, con dos grandes desventajas. La
primera es que no permite animaciones y la segunda es que sus caractersticas no son
totalmente soportadas por todos los browsers, especialmente en las antiguas versiones
de los mismos.
Su gran ventaja es que reduce el tamao de las imgenes entre un 5% y 25% ms que
los gif. No debemos dudar que en un futuro cercano sea ampliamente soportado por las
nuevas versiones de los browsers.
Cuando usar jpg/jpeg?

Es ideal para fotografas, es decir imgenes con muchsimos colores y pixels. No se les
vaya a ocurrir usarlo con imgenes simples porque perderan claridad y nitidez.
A continuacin se puede ver una tabla comparativa de las principales caractersticas de

los formatos grficos para crear pginas web:

b. Insercin de Imgenes.
Para insertar imgenes de manera sencilla, siga las siguientes recomendaciones:
- Guardar la pgina antes de insertar una imagen.
- Los archivos grficos deben estar dentro de una carpeta determinada en la misma
ubicacin del Sitio.
- Pulsar CTRL+N para crear un nuevo documento Pgina en blanco > HTML, y
guardar con el nombre de buscadores.html
- Ir a la Barra Insertar > Comn > Imagen
- En el cuadro de dilogo Abrir que se muestre, seleccionar el archivo grfico

(recordar respecto a los formatos), y elegir Google.jpg que se encuentra dentro de
la carpeta imgenes.

- Luego, definir un texto alternativo (opcional) para la imagen.
- Observar el resultado, y ver las Propiedades.
1 2 3
5
4
- En las propiedades se puede modificar sus dimensiones (1), se muestra el origen de

la imagen (2) los botones de la derecha permiten seleccionar directamente la
imagen desde la Ventana Archivos o abriendo el Cuadro de Dilogo Abrir, el texto
alternativo (3), editarlo usando el programa predeterminado para tratamiento de
imgenes (4), establecer un borde y alinearlo (5).
- La propiedad Alinear permite definir el texto circundante.
Predeterminado (Inferior)
Superior

Medio
Izquierda
Derecha
- Completar la misma pgina para que tome esta apariencia:

HIPERVNCULOS
a. Tipos: Vnculos a Sitios Externos, a Pginas del mismo Sitio, a un
punto especfico de un documento (anclas), a correos electrnicos,
para descarga de archivos, para ampliacin de imgenes.
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado
lleva de una pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.
- Referencia absoluta: Conduce al sitio en el que se encuentra el documento

utilizando la ruta completa del archivo.
La ubicacin es en Internet, por ejemplo, http://www.sise.edu.pe
- Referencia relativa al documento: Conduce a un documento situado dentro del

mismo sitio que el documento actual, pero partiendo del directorio en el que se
encuentra el documento actual.
Si queremos referirnos a carpetas que estn por encima del nivel donde nos
encontramos deberemos utilizar ../
- Referencia relativa al sitio: Conduce a un documento situado dentro del mismo

sitio que el documento actual. En este mtodo los enlaces se crean indicando la ruta
a partir de la raz del sitio.
- Puntos de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del

actual o de otro diferente. Para ello el vnculo debe ser
nombre_de_documento.extension#nombre_de_punto. El punto se define dentro
de un documento a travs del men Insertar, opcin Anclaje con nombre.
Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente

forma: ../secciones/seccion1.html#parte2
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades.

Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y
seguidamente establecer el Vnculo en el inspector.

- Pulsar CTRL+O para abrir la pgina buscadores.html.
3
4
5
2
- (1) Enlace a un Sitio Web Externo: Clic a la imagen de Google, ir a las

propiedades:
Cuando una imagen se convierte en hipervnculo, se muestra un borde de color

azul, si no desea que se muestre establecer la propiedad Borde: 0
- (2) Enlace a una pgina web del mismo Sitio: Clic a la imagen de la casita:
- (3) Seleccionar el texto SISE.

- (4) Enlace hacia un correo electrnico: Seleccionar Contctenos
- (5) Enlace hacia un archivo: Seleccionar aqu.
b. Destino (self y blank)

La pgina donde se abrir la pgina, que puede ser:
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el
conjunto de marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
IMGENES DE SUSTITUCIN
La imagen de Sustitucin describe un comportamiento interactivo que se activa simplemente al
pasar el cursor del mouse encima de la imagen en cuestin, es decir, cuando usted desliza por
encima el cursor del mouse sobre la imagen sta cambiar por otra imagen. Para este efecto
se requieren dos imgenes, una para el estado Off y otra para el estado On.
Procedimiento .
- Pulsar CTRL+O para abrir la pgina buscadores.html, elimine las imgenes

correspondientes a Altavista y a Yahoo.
- Ir a la Barra Insertar > Comn > Imagen de Sustitucin

- En la ventana que se muestra a continuacin se debe seleccionar la imagen
original o inactiva y la imagen de sustitucin o aquella que se mostrar cuando el
puntero del mouse se halle encima de la imagen, un texto alternativo y el
hipervnculo.
- De manera similar modifique la imagen para Yahoo, y previsualizar en el

navegador.

MAPAS DE IMGENES
Un mapa de imagen simplemente es una imagen que se ha divido en varias zonas interactivas.
Estas zonas interactivas generaran una cierta accin al hacer clic en ellas. Estas acciones
implican abrir un nuevo documento, esto se hace a travs de vnculos.
Procedimiento .
- Pulsar CTRL+O para abrir la pgina computacion.html.
- De un clic a la computadora, y en la barra de propiedades elegir :

- Y luego trazar la zona en donde est el Teclado.
- Establecer el vnculo para dirigirse a una pgina al hacer clic sobre esa zona, y el
destino.
- De la misma manera, trazar la zona del monitor y vincularlo con pagina02.html,

destino _blank.
ELEMENTOS FLASH
Cualquier animacin creada en Flash tiene extensin SWF, el cual puede ser insertado en un
documento HTML.

Procedimiento .
- Pulsar CTRL+O para abrir la pgina presentacion.html, la que puede encontrar

que est formada por una tabla con una columna y cinco filas.
- Pulsar CTRL+O para abrir la pgina presentacion.html, la que puede encontrar

que est formada por una tabla con una columna y cinco filas. Establecer las
siguientes propiedades de pgina:
Color de Fondo : #D4F0E1
Imagen de Fondo : imgenes/lnea.jpg
Titulo: : BIENVENIDOS A TURISMO PER
- En la segunda celda, insertar la animacin Flash que se encuentra en

flash/inicio.swf .
1 2
- En las propiedades puede ajustar el tamao de la animacin (1), editarlo en Flash

(2), y reproducirlo para previsualizarlo (3).

- Al previsualizar en el navegador, se mostrara as:
- En la cuarta celda insertaremos un texto flash, estableciendo los siguientes

valores:

- Previsualizar en el navegador.
- Observar que el fondo del texto Flash tiene un color, ahora lo vamos a hacer
transparente (esto es vlido para cualquier animacin Flash). De un clic al texto y
luego ingrese a la propiedad Parmetros y establecer los siguientes valores:
- Previsualizar en el navegador y observar que el fondo ya no est presente.
- Abrir la pagina03.html, y ubicarse en la posicin indicada:

- Ir a la Barra Insertar > Comn > Flash Video, y en la ventana que se muestre
seleccionar los siguientes valores:

Contenido
- Tablas: Creacin y Formato.

- Aadir y eliminar filas y columnas.
- Aadir, dividir y combinar celdas.
TABLAS
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.
Hasta hace poco, la mayora de las pginas web se basaban en tablas, ya que resultaban de
gran utilidad al mejorar notablemente las opciones de diseo, hoy en da, la organizacin de los
elementos dentro de una pgina web utiliza un estndar en el que se emplean la etiqueta DIV.
- Pulsar CTRL+N para crear un nuevo documento, el que debe guardar con el
nombre de tablas.html.
- Ir a la Barra Insertar > Comn > Tabla
- En el cuadro de dilogo Tabla, establecer el nmero de Filas y Columnas, el ancho

de la tabla en pixeles o en porcentaje de acuerdo al tamao de la ventana del
navegador, grosor del borde, relleno de celda (atributo cellpadding), espacio entre
las celdas (atributo cellspacing), etc.

- Establecer los siguientes valores:
Filas :3
Columnas :2
Grosor del borde : 1
Ancho de la tabla : 500
Colocar los textos correspondientes.
- Seleccionar la primera fila, y luego centrar usando cualquiera de las dos

propiedades:

- Dependiendo de los elementos seleccionados, las propiedades pueden variar:
1 3 4 5
2
6 7
1. Indica el elemento seleccionado: Fila, Columna o Celda

2. Combinar o Dividir celdas.
3. Alineacin del contenido: Horizontal o Vertical.
4. Ancho y alto del elemento seleccionado.
5. Imagen de fondo.
6. Color de fondo.
7. Color del borde.
a. Modificar propiedades de la tabla.

- Para el caso de la tabla:
1 2 3 4
5
6
1. Modificar el nmero de filas y columnas.

2. Ancho de la tabla en pixeles o en porcentaje.
3. Relleno y espaciado de las celdas.
4. Alineacin del contenido.
5. Grosor del borde.
6. Color de Fondo, Color del borde e Imagen de fondo.
- Segn esto, modificar la tabla anterior y obtener:

b. Insertar filas y columnas.
- Si requiere insertar filas o columnas, lo que puede hacer es ubicarse en la celda
cercana a donde desea hacer la modificacin, y hacer clic derecho para seleccionar
la opcin adecuada desde el men contextual.
- Insertar 2 columnas, despus de la columna actual, y completar la tabla.
- En las opciones del men contextual tambin puede encontrar la forma de combinar
celdas o dividirlas.

- Crear una siguiente tabla en una nueva pgina de nombre horarios.html.
c. Eliminar filas y columnas.

- Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o
columna a eliminar y elegir la opcin Eliminar fila o Eliminar columna del men
Tabla.
- Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado

(Del o Supr)
d. Combinar y dividir celdas.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn del
inspector de propiedades (lo encontrars en la parte inferior izquierda del panel
Propiedades, o pulsando sobre la opcin Combinar celdas de la opcin Tabla, que como
ya has visto puedes dirigirte a ella a travs del men contextual de la tabla y a travs del
men Modificar.

Para dividir una celda hay que pulsar sobre el botn del inspector de propiedades, o
sobre la opcin Dividir celda de la opcin Tabla.
En ambos casos, aparece una ventana como sta, en la que hay que especificar si la
celda se va a dividir en filas o columnas, y el nmero de stas.
Contenido
- Maquetacin Web usando divisiones. Elementos DIV PA.

- Manejando el Panel de Comportamientos.
- Taller de Diseo Web
MAQUETACIN DE PGINAS WEB

USANDO DIVISIONES
En pocas palabras, maquetar una pgina web es pasar el diseo a cdigo HTML, poniendo
cada cosa en su lugar (una cabecera, un men, etc.).
Hasta hace unos aos la nica manera de maquetar una pgina web era mediante tablas
HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la tcnica de
maquetacin fue evolucionando con los aos hasta llegar al punto donde no se usan tablas, si
no capas (los famosos DIVs).

Maquetacin Web usando divisiones
a. Elementos DIV PA
Un elemento PA (posicin absoluta) es un elemento de pgina HTML que tiene una
posicin absoluta asignada. Los elementos PA pueden contener texto, imgenes u otros
contenidos que se pueden situar en el documento HTML.
Se pueden colocar elementos PA delante o detrs de otros elementos PA, ocultar

algunos PA mientras se muestran otros y mover elementos PA por la pantalla. Puede
colocar una imagen de fondo en un elemento PA y, a continuacin, insertar un segundo
elemento PA, con texto y un fondo transparente, delante del primero, etc.
- Crear una nueva pgina de nombre index.html.
- Ir a la Barra Insertar > Diseo > Dibujar Div PA
- Establecer las propiedades ancho (An.), alto (Al.), Color de fondo y Visibilidad (Vis).

b. Trabajar con elementos PA
- Insertar otras dos Div PA con las siguientes apariencias. Puede mostrar u ocultar las
PA desde la Ventana PA (Men Ventana > Elementos PA).
c. Manejando el Panel de Comportamientos.

Los comportamientos son acciones que suceden cuando los usuarios realizan alguna
accin sobre un objeto, como por ejemplo, mover el puntero sobre una imagen, hacer
clic sobre un texto, hacer doble clic sobre una zona interactiva de un mapa de imagen,
etc.
Los comportamientos se programan en JavaScript. Adobe Dreamweaver CS3 permite

insertarlos a travs de la ventana Comportamientos, por lo que no es necesario escribir
el cdigo JavaScript para programarlos.
- Abrir la pgina index.htm, y hacer clic sobre una de las zonas, luego ir a la
ventana Comportamientos (Men Ventana > Comportamientos).
Agregar comportamiento
Eliminar comportamiento

- Agregar un comportamiento > Mostrar/Ocultar elementos
- Seleccionar div apDiv1 y luego clic al botn Ocultar. En la ventana

Comportamientos, seleccionar el evento onMouseOut (cuando el puntero se halle
fuera de la zona).
- Agregar otra vez el mismo comportamiento (Mostrar/Ocultar elementos) y

seleccionar div apDiv1 y luego clic al botn Mostrar. En la ventana
Comportamientos, seleccionar el evento onMouseOver (cuando el puntero se halle
dentro de la zona).
- Repetir el mismo procedimiento con div apDiv2 y div apDiv3.
- Agregar otra vez el mismo comportamiento (Mostrar/Ocultar elementos) y

seleccionar div apDiv1 y luego clic al botn Mostrar. En la ventana
Comportamientos, seleccionar el evento onMouseOver (cuando el puntero se halle
dentro de la zona).

TALLER DE DISEO WEB
1. Desde su programa de ADOBE FIREWORKS, crear una nueva imagen de 900
(anchura) y 496 (altura), color de fondo Blanco, y obtener la siguiente apariencia.
Este modelo inicial puede haber sido trabajado tambin en Adobe Photoshop, con
lo que se tiene las medidas de cada uno de los elementos que estarn contenidos
en el documento.
100 95 420 285
129
27 141 195
110
330 110
615 285 110
2. Usar la herramienta Divisin y establecer las siguientes zonas:

3. Exportar y guardar las imgenes en una carpeta imgenes dentro de una carpeta
VETERINARIA.
4. Establecer un sitio local de nombre VETERINARIA, apuntando a una carpeta del

mismo nombre.
Si bien es cierto, puede realizar los cambios directamente en la pagina HTML

generada por Fireworks, encontrar que el cdigo elaborado posee etiquetas table,
y las que a su vez podran ser convertidas a capas a travs del Men Modificar >
Convertir > Tablas en Divs PA.
Nosotros lo haremos usando divisiones flotantes no absolutas.

5. Las imgenes que corresponden a los enlaces Quienes somos, servicios, etc.,
sern imgenes de sustitucin, las que podremos editar directamente desde
Fireworks. En la ventana Archivos, activar la pestaa Activos y editar cada una de
las imgenes.
6. En Fireworks, a la imagen abierta aplicar un filtro de Matiz/Saturacin (Matiz: 248,

Saturacin: 52, Luminosidad: 44). Guardar como veterinaria_r3_c1_on.gif
(finalizar con el termino on). Repetir el procedimiento con las imgenes de los
enlaces Servicios, Productos, Instalaciones y Contctenos.
7. Crear una nueva pgina y gurdela con el nombre de index.html.
8. Lo primero es insertar una capa DIV contenedora, a partir de la Barra Insertar >
Diseo. Luego asignar un ID especfico (contenedor).
9. Clic al botn Nueva regla CSS para aplicar un estilo a la divisin.

10. Aplicar un estilo para definir el ancho de la divisin.
11. Para una mejor organizacin de los elementos, dividiremos en 3 zonas principales:
encabezado, enlaces y central.
12. Insertar otro DIV de nombre encabezado y aplicar los estilos:
Categora Valores
Cuadro Alto: 129
Ancho: 615
Flotar: Izquierda
Fondo Color de fondo: blanco

13. Insertar otro DIV de nombre textosup y aplicar los estilos:
Categora Valores
Cuadro Ancho: 129
Alto: 27
Flotar: Derecha
14. Insertar otro DIV de nombre enlaces y aplicar los estilos:
Categora Valores
Cuadro Ancho: 900
Alto: 27
Flotar: Izquierda
Borrar: Ambos
Margen Sup: 5
Margen Inf: 5
Fondo Color de fondo: #000066

15. Insertar otro DIV de nombre central y aplicar los estilos:
Categora Valores
Cuadro Ancho: 900
Alto: 330
Borrar: Ambos
Fondo Color de fondo: blanco
16. Se debe mostrar el siguiente diseo:
17. Borrar el contenido del encabezado, y luego ir a la ventana Archivos, y arrastrar las
imgenes del encabezado.

18. Dentro de la divisin central, como se observa en la imagen inicial, est formada
por cuatro partes. Crearemos divisiones dentro de la divisin central.
Zona 1 Zona 2
Ancho: 615 Ancho: 285
Alto: 330 Alto: 110
Flotante: Izquierda Flotante: Derecha
Zona 3
Ancho: 285
Alto: 110
Flotante: Derecha
Zona 4
Ancho: 285
Alto: 110
Flotante: Derecha
19. Debe mostrarse de la siguiente manera:

20. Guardar los cambios y previsualizar en el navegador.
Ejercicios
1. Disear las siguientes pginas:
qsomos.html
servicios.html

productos.html

Contenido
- Insercin de Componentes Multimedia: Sonido, Plugins y ActiveX.

- Comportamientos simples y avanzados: mensajes emergentes, texto en la barra de
estado, carga previa de imgenes, abrir una ventana del navegador, Mens de Salto.
INSERCIN DE COMPONENTES
MULTIMEDIA
1. Insertar sonido a una pgina web
No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen
estar escuchando su propia msica cuando navegan en Internet, por lo que el escuchar
tambin sonido en cada pgina que se visita puede resultar algo molesto. A pesar de
ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla
ms atractiva. Muchas de las pginas que contienen sonido suelen ofrecer la posibilidad
de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el
sonido de la pgina puedan desactivarlo.
Para agregar sonido a una pgina web debe tener en cuenta que los formatos
compatibles son wav, mid y mp3, sin embargo, los mp3 resultan ser ms pesados por lo
que tardaran ms tiempo en ser cargados para ser escuchados.
Procedimiento .
- Copiar la carpeta TURISMO hacia el Escritorio, y configurar un Sitio Local del

mismo nombre dirigido a esta ubicacin.

- Abrir la pgina index.htm, y ubicarse en la etiqueta body. Lo puede hacer
rpidamente haciendo un clic sobre el selector de etiquetas.
- En la vista cdigo, escribir:
2. Insercin de audio y video (formato mpg y flv).

Puede aadir fcilmente vdeo FLV a las pginas Web sin necesidad de utilizar la
herramienta de creacin de Flash. Para poder empezar, debe disponer de un archivo
FLV codificado.
Dreamweaver inserta un componente SWF que muestra el archivo FLV; cuando se

visualiza en un navegador, este componente muestra el archivo FLV seleccionado, as
como un conjunto de controles de reproduccin.
- Ir al Men insertar > Media > FLV, o desde la Barra Insertar.
- Establecer los valores de configuracin, como la ubicacin del archivo FLV de video,
el aspecto (a elegir) y si la reproduccin ser automtica.

- Adoptar esta apariencia:

No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar
escuchando su propia msica cuando navegan en Internet, por lo que el escuchar tambin
sonido en cada pgina que se visita puede resultar algo molesto. A pesar de ello, el incluir un
sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva. Muchas de
las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para
que aquellos usuarios que no deseen escuchar el sonido de la pgina puedan desactivarlo.
Para agregar sonido a una pgina web debe tener en cuenta que los formatos compatibles son
wav, mid y mp3, sin embargo, los mp3 resultan ser ms pesados por lo que tardaran ms tiempo
en ser cargados para ser escuchados.
- Abrir una pgina, y en el selector de etiquetas elegir <body>.
- En la vista cdigo, escribir:
Otra forma para insertar audio, y hasta video, consiste en insertar un Plugin, el que
dependiendo de que si este se halle instalado en el equipo clientes, podr ser visualizado.
- Abrir la pgina index.htm, y en la zona que corresponde a la imagen (1), eliminarla

y colocar como color de fondo una muestra del color azul.
- Ir a la Barra Insertar > Comn
- Seleccionar el archivo de audio (grupo_5.mp3), y establecer los parmetros de

uso:

- Debers definir el ancho (An: 272) y alto (Al: 24), as como la alineacin. El
parmetro autostart en false, define que al cargar la pgina no se escuche el
audio hasta que el usuario lo inicie, y el parmetro loop en false, establece que
una vez que termine el audio, no se repita.
- Aadiendo el logo del grupo musical quedara de la siguiente forma:
- En la imagen (2), eliminarla e insertar el plugin correspondiente al archivo peru.mov.

- Establecer en 160 el ancho y alto, y como parmetros los mismos que el anterior.
http://www.apple.com/quicktime/download/
Comnmente al incrustar pelculas de QuickTime, hay un elemento de objetos alrededor del

elemento de insercin. El elemento objeto se utiliza para incluir objetos como imgenes, audio,
videos, applets de Java, pelculas de tiempo rpido, y animaciones en Flash. La inclusin de
este elemento al incrustar su pelcula aade soporte adicional para el plug-in necesario para
reproducir la pelcula. Este elemento tambin aumenta la compatibilidad del navegador.
- Abrir la pgina index2.htm, y en la zona que corresponde a la imagen (1),

eliminarla y colocar como color de fondo una muestra del color azul, similar al
procedimiento anterior.
- Ir a la Barra Insertar > Comn

- Si el video a insertar es un wmv o un mpeg (probar insertando peru.wmv),
insertar un ActiveX y establecer las siguientes propiedades:
ID clase:
CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95
Base:
http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701
Parmetros:
ShowControls : true/false. Muestra los controles.
ShowStatusBar : true/false. Muestra una barra de estado.
Autostart : true/false. Inicio automtico.
<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
width="160" height="160" type=application/x-oleobject">
<param name="autostart" value="false" />
<param name="ShowControls" value="true" />
<param name="ShowStatusBar" value="true" />
<embed src="peru.wmv" width="160" height="160" autostart="false"></embed>
</object>
- Si el video a insertar es mov (QuickTime), establecer estos valores:
ID clase:
CLSID: 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B
Base:
http://www.apple.com/qtactivex/qtplugin.cab
- Aqu se muestran algunos ejemplos de cdigo HTML en donde se han incluido

ActiveX.
<object classid="CLSID: 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

codebase=" http://www.apple.com/qtactivex/qtplugin.cab" width="160" height="160"
type=video/quicktime">
<param name="autostart" value="false" />
<param name="ShowControls" value="true" />
<embed src="peru.mov" width="160" height="160" autostart="false"></embed>
</object>

COMPORTAMIENTOS
Los comportamientos integrados permiten mejorar el aspecto, la funcionalidad y el atractivo de

su sitio Web. Puede asociar estos comportamientos a los elementos de sus pginas Web sin
necesidad de conocer JavaScript.
Los comportamientos de Adobe Dreamweaver CS4 colocan cdigo JavaScript en los

documentos para que los visitantes puedan cambiar una pgina Web de diversas formas o
iniciar determinadas tareas. Un comportamiento es una combinacin de un evento y una accin
que desencadena ese evento. En el panel Comportamientos, un comportamiento se aade a
una pgina especificando en primer lugar una accin y, a continuacin, el evento que
desencadena esa accin.
e. Insertar comportamientos.
Se pueden adjuntar comportamientos al documento completo (es decir, a la etiqueta
<body>) o a vnculos, imgenes, elementos de formulario o cualquier otro elemento
HTML. El navegador de destino que elija determina los eventos compatibles con un
elemento determinado.
Se puede especificar ms de una accin para cada evento. Las acciones tienen lugar en
el orden en el que se enumeran en la columna Acciones del panel Comportamientos,
pero puede cambiar dicho orden.
- Seleccione un elemento de la pgina, como una imagen o un vnculo. Para adjuntar un

comportamiento a la pgina completa, haga clic en la etiqueta <body> en el selector de
etiquetas, situado en la esquina inferior izquierda de la ventana de documento.
- Ir al Men Ventana > Comportamientos.
- Haga clic en el botn ms (+) y seleccione una accin en el men Aadir

comportamiento. No se pueden seleccionar las acciones que aparecen atenuadas en el
men. Pueden mostrarse atenuadas porque no exista un objeto necesario en el
documento actual. Por ejemplo, la accin Controlar Shockwave o SWF aparece
atenuada si el documento no contiene ningn archivo Shockwave o SWF.
Cuando se selecciona una accin, aparece un cuadro de dilogo que muestra

parmetros e instrucciones para dicha accin.
Introduzca los parmetros de la accin y haga clic en Aceptar.
Todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores
modernos. Algunas acciones no funcionan en los navegadores antiguos, pero no
provocan errores.
El evento predeterminado que desencadena la accin aparece en la columna Eventos.

Si no es ste el evento de desencadenamiento que desea, seleccione otro en el men
emergente Eventos. (Para abrir el men Eventos, seleccione un evento o una accin en
el panel Comportamientos y haga clic en la flecha negra que seala hacia abajo y que
aparece entre el nombre del evento y el nombre de la accin.)

f. Ejecutar rutinas de Javascript.
El comportamiento Llamar JavaScript ejecuta una funcin personalizada o lnea de
cdigo JavaScript cuando se produce un evento. (Puede escribir el script usted mismo o
usar el cdigo que tiene a su disposicin en diversas bibliotecas JavaScript de acceso
gratuito en la Web.)
En este ejemplo, escribiremos una rutina que permita mostrar una ventana de
bienvenida al cargar la pgina. Antes, asegurarse de que el objeto desde donde ser
llamada la rutina de Javascript, este seleccionado.
A continuacin, seleccionamos el evento en que ser llamado.

Comportamientos avanzados
a. Mensajes emergentes.
Seleccionar el objeto desde donde ser llamado el javascript. Puede hacerlo desde el
selector de etiquetas, o haciendo clic sobre el objeto en el Panel de Diseo.
Elegir el Comportamiento Mensaje emergente.
Seleccionar el evento Load (carga de la pgina).

Lo que se visualizar al mostrar la pgina en el navegador, ser:
b. Controlar el texto de la barra de estado.
Seleccionar el objeto (imagen, capa, pgina, etc.), luego aadir el Comportamiento

Establecer texto > Establecer texto en la barra de estado.
Digitar el texto que se visualizar en la barra de estado.

c. Intercambiar imagen.
Insertar una imagen, y establecer un ID (por ejemplo, carita) en el Panel de

Propiedades.
Seleccionar la imagen, luego aadir el Comportamiento Intercambiar imagen.
Ubicar la imagen que va a intercambiarse.

Se generan dos eventos, uno restaura la imagen al alejar el puntero del mouse de la
imagen (onMouseOut), y el otro cambia la imagen original por la seleccionada
(onMouseOver).

d. Abrir una ventana del navegador.
Seleccione el texto Contctenos que se encuentra en la parte inferior izquierda.
Elija el Comportamiento Abrir ventana del navegador y en el evento onClick, y

establecer:
Previsualizar en el navegador.

Contenido
- Creacin de Formularios en Adobe Dreamweaver CS3: Campo de Texto, rea de Texto,

Casilla de Verificacin, Radio Button, Listas, Botones
- Publicacin de Sitios Web
- Hosting y Dominio. Sitios Remotos: Configuracin.
- El Panel Archivos. Sincronizar Sitios.
CREACIN DE FORMULARIO EN
ADOBE DREAMWEAVER CS3
Los formularios pueden ser creados dentro de tablas o divisiones, de esa manera no pierden el
aspecto que caracteriza, ya que sus controles deben estar bien organizados. Como ya sabr, los
formularios pueden enviar datos a un correo electrnico (si es que el cliente de correo se halla
configurado), o hacia una pgina dinmica de tipo ASP, ASP.NET o PHP.
Existen en la web ciertos servicios que permiten incluir ciertas modificaciones, tal es as, que los
datos puedan ser recepcionados en un correo como Gmail, Hotmail, etc., sin necesidad de incluir
rutinas complicadas de programacin.
Procedimiento .
- Crear una pgina HTML en blanco, y guardar con el nombre de registro.html.
- Ir a la Barra Insertar > Formularios.

- Insertar una tabla de 20 filas y 3 columnas, con borde 0, y colocar los textos
siguientes:
- Combinar algunas celdas y darle el formato correspondiente hasta obtener el

siguiente diseo:
- Insertar un Campo de Texto, en donde el usuario podr escribir sus Apellidos.

- Establecer en la propiedad Tipo: una lnea, para Apellidos, Nombres y Nombre de
Usuario, ancho de caracteres (Ancho car.) en 30. En Contrasea elegir el tipo
Contrasea, ancho de 6 y caracteres mximo (Car. Mx) en 6.
- En email, establecer el valor inicial (Val inicial) en @, en condiciones de uso el tipo

varias lneas, ancho de caracteres en 40, nmero de lneas (Lneas nm) en 3, en
valor inicial un texto.
- Insertar en el sexo, dos botones de opcin.

- Al botn de opcin Masculino, establecer la propiedad activado y en femenino
desactivado. A ambos se debe colocar el mismo Id (sexo).
- Insertar una Lista/Men para configurar los pases de residencia.
- Insertar Casillas de Verificacin en las preferencias.
- Insertar dos botones, uno con la propiedad Enviar formulario activado, y otro con
la propiedad Restablecer formulario, activada.

- Por ltimo, establecer el mtodo de envo (get / post), y la accin (si ser enviado a
un correo o procesar un documento dinmico de tipo ASP, ASP.NET o PHP). En
nuestro ejemplo, puede activar el formulario desde el selector de etiquetas, y enviar
los datos hacia el correo de info@sise.edu.pe.

PUBLICACIN DE UN SITIO WEB
La publicacin del Sitio Web viene a ser la etapa en la que son enviados los archivos a un
servidor web. El Servidor Web, usualmente, pertenece a una empresa que consta de una
infraestructura tecnolgica para poder brindar dicho servicio, el que puede ser gratuito (free) o
de pago (dedicado).
Una vez que el sitio ha sido cargado al servidor web, este debe ser reconocido o llamado desde
el navegador a travs de una URL, para lo que se debe adquirir un dominio.
a. Hosting
El alojamiento web (en ingls web hosting) es el servicio que provee a los usuarios de
Internet un sistema para poder almacenar informacin, imgenes, vdeo, o cualquier
contenido accesible va Web. Los Web Host son compaas que proporcionan espacio
de un servidor a sus clientes.
Servicios pagados
Este tipo de obtencin, por lo general viene dado por el contrato de un proveedor de
internet, el cual junto con dar conexin, entre la posibilidad de almacenamiento
mediante disco virtual o espacio web o combinacin de ambos.
Otro medio de obtencin es contratando algn servicio de una empresa no

dependiente de la conexin a internet, las cuales ofrecen segn las capacidades de
sus servidores o de su espacio. Casi siempre a la par, entregan servicios aadidos,
como la ejecucin de tareas automticas o cuentas de correo electrnico gratuitas.
Normalmente las transacciones son electrnicas, por tarjeta de crdito o por

sistemas de pagos como PayPal.
Servicios gratuitos.
Este tipo de servicio viene dado por la base de ser gratuito, y sin costo alguno al
suscriptor. Sin embargo, quienes usan este servicio, por lo general son pginas de
bajos recursos de mantencin o aquellas que los dueos no poseen suficiente dinero
para ser mantenida.
Como medio de financiamiento, el servidor coloca avisos de publicidad de Adsense

u otras empresas, haciendo que la pgina se llene de publicidad en algn punto.
Otra limitacin de estas ofertas es que tiene un espacio limitado y no se puede usar
como almacn de datos, ni pueden alojar pginas subversivas o de contenido adulto
o no permitido.
De todas maneras, existe una amplia oferta de alojamientos gratuitos con

caractersticas muy diferentes y que pueden satisfacer las necesidades de
programadores que desean un lugar donde hacer pruebas o que mantienen una web
con un nmero no muy elevado de visitas.
De acuerdo a la plataforma del servidor web, podramos decir que se tienen:
Hosting Linux: manejan pginas PHP y bases de datos MySQL/Postgree. Por lo

general son ms econmicas.
Hosting Windows: pginas ASP, ASP.NET y bases de datos Access y SQL Server.

b. Dominio
Un dominio de Internet es una red de identificacin asociada a un grupo de dispositivos
o equipos conectados a la red internet.
El propsito principal de los nombres de dominio en internet y del sistema de nombres

de dominio (DNS), es traducir las direcciones IP de cada modo activo en la red, a
trminos memorizables y fciles de encontrar. Esta abstraccin hace posible que
cualquier servicio (de red) pueda moverse de un lugar geogrfico a otro en la red
internet, aun cuando el cambio implique que tendr una direccin IP diferente.
Sin la ayuda del sistema de nombres de dominio, los usuarios de internet tendran que
acceder a cada servicio web utilizando la direccin IP del nodo (Ej. Sera necesario
utilizar http://74.125.45.100 en vez de http://www.google.com).
El siguiente ejemplo ilustra la diferencia entre una URL (Uniform Resource Locator) y
un nombre de dominio:
URL : http://www.example.net/index.html
Nombre de dominio : www.example.net
Nombre de dominio registrado: example.net
Ejemplos de dominios:
.es : para servicios de Espaa.
.eu : para servicios de Europa.
.mx : para servicios de Mxico.
.pe : para pginas de Per
.com : comerciales
.org : organizaciones
.net : redes o grupos de usuarios.
Ventajas:
Su dominio acta como Vitrina y es la direccin donde las personas de todo el
mundo pueden conocer sus servicios o adquirir sus productos.
Le ayuda a crear y promover la identidad de su empresa en Internet,

posicionando su marca ante una audiencia de millones de clientes potenciales.
Establece un punto de contacto, un lugar donde los clientes pueden obtener

informacin sobre sus productos y servicios las 24 horas del da.
Da prestigio a su empresa frente a los competidores que todava no gozan de

presencia en Internet o que utilizan alojamientos gratuitos.
Como herramienta de marketing y estrategia comercial, equipara a las pequeas

y grandes empresas.
c. Publicar un sitio web en un servidor gratuito.

Ya que contratar un hosting dedicado requiere realizar un pago, usaremos uno de los
tantos servicios gratuitos que son ofrecidos en la web.
Nota: El Instituto Superior SISE no tiene ningn tipo de contacto comercial con el
servicio que ser descrito a continuacin, su utilizacin ser solamente con fines
didcticos.
Para este ejemplo nosotros utilizaremos el servicio de MiArroba.

Registro de la Cuenta.
- Ingresar a http://miarroba.es/
- Ingresar al enlace Registrarse.
- Rellenar los datos del formulario de registro.
- Ingresar a la cuenta de correo con la que se registro.
xxxxxxxxx
xxxxxxxxx
yonimart
miclave
1615

- Introducir los datos solicitados y el cdigo de activacin en la pgina de
arroba.com
- Una vez creada tu cuenta puedes ingresar dndole clic al Botn Entrar, luego te
pedir los Datos que utilizaste para registrarte.
- Observar que ya est conectado y tu nombre de usuario aparece en la parte

superior izquierda ahora puede utilizar los servicios brindados por arroba.com,
entre ellos el de Espacio web.

Configurar la creacin del Espacio Web
Una vez creada t cuenta puedes utilizar los servicios que te brinda el servidor
gratuito Miarroba.
Estos servicios tambin los

podemos ver en la parte inferior
- Seleccionar el Botn espacio o Hosting, luego el Botn Nuevo espacio.
- Llenar el formulario en donde detalle la informacin del sitio web: Nombre del Sitio
Web (1), Ttulo de la pgina (2), Idioma (3), contrasea (4) y verificar el cdigo de
seguridad (5) y luego el Botn Continuar.

- Luego, se debe mostrar una pgina confirmando la creacin del espacio web.
- Ahora podemos utilizar este espacio para poder publicar nuestro sitio web.
- Tomar notas de los datos de Acceso Cliente FTP ya que estos me permitirn la
publicacin del Sitio Web desde Dreamweaver.
- De clic en Desconectar para cerrar su sesin.

Publicacin.
- Copiar la carpeta SISEBIBLIOTECA a su Escritorio, y configure un Sitio Local del

mismo nombre apuntando a esta carpeta, en modo Avanzado, primero los Datos
locales y luego los Datos remotos.

- Una vez que haya aceptado, observar la ventana Archivos.
Obtener (descargar) Colocar (upload)
Actualizar Sincronizar
Conectar/desconectar
Ver sitios locales y
remotos
- Desde esta ventana puede elegir una pgina (ejm: index.html), varios de ellos o
todo el sitio completo, y luego hacer un upload (Colocar) hacia el servidor remoto.
- Tambin puede activar Ver sitios locales y remotos y se muestra una ventana de
donde podr cargar o descargar los archivos.

Contenido
- Introduccin a PHP.
- Instalacin y Configuracin del Servidor Apache.
- Variables y Operadores: Aritmticos, de Comparacin y Lgicos.
- Estructuras de Control en PHP.
- Proceso de formularios: Envo y Recepcin.
- Mtodos GET y POST.
- Formularios de Envo de Correo Electrnico.
INTRODUCCIN A PHP
PHP son las siglas de Hypertext PreProcessor, es un lenguaje interprete de alto nivel que se
inserta en pginas HTML a manera de scripts los cuales son ejecutados en el servidor.
Ejemplo:
<head>
<title>Ejemplo</title>
</head>
<body>
<center>
<b><?php echo La Computadora ?></b>
</center>
</body>
Usando PHP podemos crear todo tipo de aplicaciones desde las ms simples como procesar
suscripciones de visitantes a una base de datos, generar contenidos dinmicos, tiendas
electrnicas o crear toda una solucin integral intranet de negocios corporativa.
Quiz la caracterstica ms potente y destacable de PHP es el soporte que tiene para una gran
cantidad de motores de bases de datos como MySQL, PostgreeSQL, Oracle, Informix, etc.
Pa poder correr nuestras pginas PHP en un sistema con plataforma Windows, debemos instalar
primero un servidor web como Apache, y si requerimos crear una base de datos se tiene que
instalar el gestor de base de datos (en nuestro caso ser MySQL).

Podramos bajar de Internet cada programa para su instalacin y configuracin manual, o en
todo caso podemos usar un paquete instalador como AppServ que permite instalar y configurar
todo automticamente.
INSTALACIN Y CONFIGURACIN DEL

SERVIDOR APACHE
1. Instalacin del AppServ 2.5.10
- Ejecutar el instalador del AppServ.
- Seguir el procedimiento de instalacin.
- Definir:
Server Name: localhost.com
Administrator email: admin@localhost.com

- Definir una contrasea para el Administrador de MySQL.
- Completar el proceso de instalacin.

- Abrir el navegador y cargar la pgina de inicio.
2. Configuracin de un Sitio Web Dinmico

- Realizar la configuracin bsica estableciendo el nombre del sitio (1) y la URL del
sitio: http://localhost/nombre_carpeta_web/ (2).
- Definir que se utilizar tecnologa de servidor (1) de tipo PHP MySQL (2).
- Establecer que la edicin y comprobacin se realizar a nivel local (1) y definir la

ruta hacia C:\AppServ\www\nombre_carpeta_web\ (2).

2
- Comprobar que la URL no contenga errores.
- Si todo es correcto se mostrar un resumen de los datos.

CONOCIENDO PHP
1. Insertando scripts PHP
- Una vez instalado y probado que funciona el localhost con el servidor Apache,
procedemos a configurar un Sitio Dinmico. Pulsar CTRL+N para crear una nueva
pgina PHP en blanco.
1 3
- Los scripts php van incluidos entre las etiquetas <?php ?>, las que pueden ser
insertadas directamente desde la Barra Insertar > PHP, o escribindolas
manualmente en el editor de cdigo.
- Observar que el cdigo que

recibe el navegador del
cliente es HTML y no se
observa los scripts PHP.

2. Variables y Operadores
Las variables permiten almacenar cualquier tipo de dato cambiante, y no requieren ser
declaradas. El nombre de la variable debe iniciar con el smbolo $.
Los Operadores Aritmticos que usa son similares a los usados en el lenguaje JAVA.

Suma + 5+2
Resta - 63
Multiplicacin * 8*3
Divisin / 6/2
Mdulo o Residuo % 7%2
Incremento ++ 2++
Decremento -- 3--
Al igual que los Operadores de Comparacin:

Mayor > 5>2
Menor < 6<3
Igual == 8 == 8
Diferente != 7 !=3
Mayor o igual >= 9 >=7
Menor o igual <= 8 <= 2
Y que los Operadores Lgicos:

Y Lgico && (5 > 2) && (4==2)
O Lgico || (3 != 2) || (2 > 2)
Negacin ! ! (3 == 2)
Ejemplo. .
- Crear una pgina PHP en blanco, y guardar con el nombre de ejemplo03.php, con
el siguiente diseo:

- Insertar un formulario y dentro una tabla de borde 0 formado por 4 columnas y 5
filas. En ella insertar los controles de formulario que se muestran en la captura y una
imagen (1) con el ID: imagen. En la lista de productos aadir los elementos:
Al cuadro de lista de los productos y a los textfield correspondientes a la cantidad y

al precio unitario modificar el ID.
lstProducto
txtcantidad
txtpu
- Establecer en las propiedades del formulario el action hacia la pgina

procesos.php, y en el mtodo seleccionar POST.
- Crear una pgina PHP en blanco, y guardar con el nombre de procesos.php.

- Observar el uso de las variables y operadores. Retornar a la pgina ejercicio03.php
y previsualizar en el navegador.
- Para completar el diseo anterior, agregar una funcin Javascript al cuadro de lista
para que al seleccionar un artculo se cargue la imagen correspondiente.
- Como se observa, el evento a usar sera onchange, y enva el valor del ndice
correspondiente al elemento seleccionado a la funcin mostrar, declarada en el
encabezado.

ESTRUCTURAS DE CONTROL EN PHP
Para alguien con conocimientos de Programacin en JAVA, encontrar que son similares a las
usadas por PHP, como:
1. Estructuras de Decisin
if (Expr.lgica){
.bloque de acciones verdaderas;
}else{
.bloque de acciones falsas;
}
2. Estructuras Selectivas Mltiples

switch(variable){
case Valor1:
break;
case Valor2:
break;
default:
bloque de acciones opcionales;
}
3. Estructuras Repetitivas
for(inicializacin; condicin; incrementos){
}
while(Expr.lgica){
}
do {
} while(Expr. Lgica)

Ejercicio .
- Crear una pgina PHP en blanco, y guardar con el nombre de ejemplo04.php, con
el siguiente diseo:
- El cuadro de lista (lstcursos) debe mostrar los nombres de 3 cursos cualquiera, y el

primer elemento - -Seleccione un curso.
- A los botones de radio establezca el mismo nombre: condicion, y el valor activado

para Pagante (P) debe ser de 500, para Semibecado (S) ser 250 y para Becado (B)
ser 0.
- El botn procesar es un botn de accin ninguno, que debe enviar los datos a una
pgina de nombre resumen.php.

- Usando rutinas de Javascript validaremos la entrada de datos de los tems que
aparecen con asterisco, para lo que invocaremos desde el botn Procesar a la
funcin validar.
- La funcin validar:

- Crearemos una nueva pgina PHP de nombre resumen.php, con el siguiente
contenido:
MTODOS GET / POST

La diferencia entre el mtodo POST y GET radica en la confidencialidad de los valores enviados
desde el formulario, los que son mostrados en la URL a travs del mtodo GET pero son
ocultados usando POST.
Ejercicio .
- Regrese al diseo de la pgina ejercicio03.php y cambie el mtodo de POST por

GET.
GET

- Observe que los datos del formulario son visualizados en la barra de direccin, lo
cual en el caso de ser passwords, sera contraproducente.

Contenido
- Gestionar Bases de datos con MySQL

.1. Creacin de Bases de Datos y Tablas.
.2. Exportar e Importar scripts.
- Construccin de aplicaciones PHP usando Dreamweaver CS3
.1. Concepto de Pginas Dinmicas
.2. Crear una conexin a la Base de Datos.
.3. Juego de Registros.
.4. Mostrar datos dinmicos.
.5. Repeticiones.
.6. Filtrado de Juego de Registros.
GESTIN DE BASES DE DATOS MySQL

MySQL es un sistema de administracin de bases de datos relacionales que proporciona a los
usuarios una potente solucin de bases de datos SQL (Structured Query Language). Es rpida,
robusta y fcil de utilizar.
Una de las grandes posibilidades de PHP es la posibilidad de manejar bases de datos alojadas
en servidores remotos.
Las bases de datos contienen tablas, las tablas contienen registros, los registros estn formados
por campos de distintos tipos y dentro de los campos se almacenan datos que pueden aadirse,
modificarse, consultarse, actualizarse y borrarse, adems de ordenarse de distintas formas.
CAMPOS
(columnas)
REGISTROS
(filas)

1. Creacin de Bases de Datos y Tablas.
- Abrir el navegador de Internet e ingresar a la URL: http:// localhost, luego ir al

vnculo phpMyAdmin Database Manager.
- Ingrese los datos Usuario: root y Contrasea: la que ingreso al momento de

instalar.
- Crear la base de datos CINEPLANET. Ingresar el nombre (1) y luego clic a CREAR.

- Crear la tabla GENEROS.
- Definir la estructura de la tabla GENEROS.
- Una vez creada la tabla, se muestra el cdigo SQL generado.
- Para agregar datos a la tabla, d clic al enlace Insertar.
- Para ver los datos a la tabla, d clic al enlace Examinar.

- El cono permite EDITAR el registro seleccionado, mientras que permite
ELIMINAR.
- Para crear otra tabla, d clic sobre el enlace de la izquierda para seleccionar la base
de datos, y luego crear la tabla como lo hizo con la tabla Generos.
- Crear la tabla TIPOS con la siguiente estructura y datos:
NOMBRE TIPO DE LONGITUD PREDETERMINADO EXTRA

DEL CAMPO DATO
tipoID Int Auto_increment
Nombre Varchar 50
Imagen Varchar 50 no_foto.jpg

tipoID Nombre Imagen
1 DVD ORIGINAL dvd_original.jpg
2 DVD COPIA dvd_copia.jpg
3 VHS no_foto.jpg
2. Exportar e importar Scripts.

Una vez creada la base de datos se puede crear el SCRIPT que permita llevarlo a otro
equipo, para lo cual debe activar la base de datos y hacer clic sobre Exportar.
- En la ventana siguiente, seleccionar la tabla o tablas que sern exportadas en el

script (1), activar las opciones de los INSERTS (2) y Enviar (3) para generar un
archivo.
- Gurdelo en alguna ubicacin, a partir de donde lo pueda encontrar para restaurar la

base de datos.
- Retornar a la base de datos y eliminar.

- Confirme el mensaje que se muestra.
- Crear nuevamente la base de datos CINEPLANET, y luego elija IMPORTAR.
- En EXAMINAR, seleccionar el archivo cineplanet_real.sql (1).

CONSTRUCCIN DE APLICACIONES
PHP USANDO DREAMWEAVER CS4
1. Concepto de Pginas Dinmicas
Las pginas dinmicas se almacenan en el servidor y cuando son requeridas se ejecutan

y devuelven una salida de cdigo HTML al cliente que lo visualizar en su navegador.
Mientras el archivo PHP se ejecuta en el servidor, puede crear una conexin a una base
de datos y extraer o guardar informacin en ella.
Ahora que ya tenemos un servidor de pruebas donde pueda ejecutarse el cdigo que
introduzcamos en nuestras pginas y permita la creacin de bases de datos para
almacenar informacin pasaremos a crear nuestras propias pginas dinmicas de acceso
a datos.
2. Crear una conexin a la Base de Datos.

Ahora que ya est configurado el servidor de pruebas en donde pueda ejecutarse el
cdigo que introduzcamos en nuestras pginas y permita la creacin de bases de datos
para almacenar informacin pasaremos a crear nuestras propias pginas dinmicas de
acceso a datos.
- Crear una nueva pgina PHP y guardar como lista_generos.php, luego ir al Men
Ventana > Base de datos (o pulsar CTRL+SHIFT+F10).

- Definir el nombre de la conexin y los datos de configuracin de la base de datos.
- En Seleccionar podr elegir la base de datos CINEPLANET.
- Se puede observar la estructura de la conexin.
3. Juego de Registros.
Una vez creada la conexin podremos insertar en cualquier pgina informacin
almacenada en la base de datos, slo tenemos que decidir qu datos vamos a mostrar.
Crearemos un juego de registros (RecordSet) donde almacenaremos los datos que se

van a mostrar.
- Ir a la barra Insertar > Datos > Juego de registros.

- Definir el nombre del recordset, el nombre de la conexin y las columnas que se van
a mostrar. Observar que se ha seleccionado Todo para definir todas las columnas
de la tabla.
- Crear una nueva pgina PHP de nombre lista_actores.php, y definir un juego de

registros que muestre las columnas ActorID y Nombres de la tabla Actores.

4. Mostrar datos dinmicos.
Una vez creado el Juego de Registros, procedemos a mostrar los datos en la pgina.
- Abrir la pgina lista_generos.php e ir a la barra Insertar > Datos > Texto

dinmico.
- Se mostrar el campo.
5. Repeticiones.
Al mostrarse los resultados en el navegador, solo se muestra un solo dato. El siguiente
paso sera el de repetirlo para observar todos los datos.
- Seleccionar la zona que desea repetir, y luego ir a la barra Insertar > Datos >
Repetir regin.
- En la ventana siguiente, puede establecer los valores la repeticin de los datos.

- Se debe mostrar algo similar a la siguiente imagen.
- Lo anterior tambin pudo haber sido creado si hubiramos usado una Tabla
Dinmica. Abrir la pgina lista_actores.php, luego ir a la Barra Insertar > Datos >
Tabla dinmica.
- Aplicndole formato a la tabla creada quedar de la siguiente manera:

6. Filtrado de Juego de Registros

Los juegos de registros creados pueden ser filtrados de acuerdo a determinados
criterios, como valores introducidos por el usuario, parmetros de URL, variables de
sesin, etc.
- Copiar a la carpeta Apache\www la carpeta AMBROSIA. Definir un sitio, de la

misma forma que lo hizo con cineplanet.
- Abrir la imagen ambrosia.png desde Fireworks, y exportarla a PHP con imgenes

hacia la carpeta. Definir el nombre de la pgina como index.
- Crear la conexin a la base de datos AMBROSIA de MySQL (restaurar a partir del

script que se halla dentro de la carpeta).
- Crear un juego de registros de nombre rsCategorias, que devuelva todos los datos
de la tabla Categorias.
- Crear otro juego de registros (rsNovedades).

- La instruccin SQL es una consulta que permite mostrar el ISBN, Titulo y Portada de
la tabla LIBROS, que cumplan con la condicin de que el COD de la tabla
novedades sea igual al del ISBN de la tabla Libros.
- Insertar una divisin, y dentro de ella una tabla de 2 columnas y 2 filas.
- En la tabla inserte una imagen cualquiera de un libro y una lista con los tems
Impreso y Digital. Modificar el cdigo de la imagen insertando el campo Portada.
- Ahora la informacin del archivo grfico se obtiene del nombre almacenado en la

tabla. Acabamos de crear una Imagen dinmica.
- Seleccionar la divisin (lo puede hacer desde el selector de etiquetas) y aplicar

repetir la regin para rsNovedades cada 3 registros.

- Al Previsualizar en el navegador se deber mostrar:

- En la categora que se muestra a la izquierda, estableceremos un vnculo hacia la
pgina listado.php, y enviar un parmetro URL que se define por el campo
CategoriaID.
listado.php?categoria=<?php echo $row_rsCategorias['CategoriaID']; ?>
- Pulsar CTRL+SHIFT+S o ir al Men Archivo > Guardar como, y guardar la pgina

con el nombre de listado.php, y eliminar el juego de registros rsNovedades y crear
otro de nombre rsListado con los siguientes valores:
- Aqu es donde aplicamos el filtrado de los datos que se van a mostrar, de acuerdo al
parmetro que ser enviado a travs de la URL, de nombre categora.

Contenido
- Manejo avanzado de datos

.1. Paginacin de registros.
.2. Asistente para la insercin, edicin y borrado de registros.
.3. Restringir accesos.
MANEJADO AVANZADO DE DATOS

Adobe Dreamweaver nos permite paginar los registros ledos del juego de registros, permitiendo
una navegacin ideal, y herramientas que permiten crear una zona de acceso que contenga
pginas privadas solamente manejadas por aquellos usuarios que se hallan identificado
previamente, de tal manera que nos permita disear pginas de administracin de datos
(insertar, modificar y eliminar).
1. Paginacin de registros.
- Abrir la pgina listado.php. Al establecer el comportamiento Repetir regin, se
haba configurado para que se muestre en bloques de 3 registros. Para habilitar la
navegacin por los otros registros usaremos los contadores de pginas.
- Insertar una divisin con un estilo definido en Fuente: Verdana, Tamao:12, Color:
Amarillo, Fondo: Azul.
- Seleccionar el texto que aparece dentro y luego ir a la Barra Insertar > Datos.

rsListado
- Al lado derecho insertaremos el Estado de navegacin de juego de registros.
rsListado
- Quedara algo como esto.
2. Uso de los Asistentes para insertar, editar y eliminar registros.

- Abrir la pgina listado.php y hacer ciertas modificaciones en el diseo.
Zona Central

- Guardar con el nombre de mant_categorias.php. En la Zona Central insertar dos
divisiones.
3
2
En la primera divisin (1) escribir el texto MANTENIMIENTO: CATEGORIAS.
En la segunda divisin (2) insertaremos los siguientes elementos:
(3) Un formulario que contenga un botn de tipo enviar con el valor Agregar
categora. Definir en las propiedades Accin: mant_categorias_nuevo.php
y Mtodo: Post.
(4) Una tabla de 4 columnas y 2 filas. Crear un Juego de Registros para

mostrar todos los datos de la tabla Categoras, luego insertar los campos a
las celdas mostradas. Insertar las imgenes en forma de lpiz (Alt:
Modificar) y en forma de aspa (Alt: Eliminar). Seleccionar la segunda fila y
adicionar el comportamiento Repetir regin.
- Al Previsualizar se debe observar.
- Establecer los vnculos en las imgenes.
mant_categorias_editar.php?CategoriaID=<?php echo $row_rscategorias['CategoriaID']; ?>

mant_categorias_borrar.php?CategoriaID=<?php echo $row_rscategorias['CategoriaID']; ?>
- Disear la pgina mant_categorias_nuevo.php, a partir de la pgina anterior, dejar

la conexin creada. Borrar el contenido de la segunda divisin, y ubicar el cursor en
esa zona, luego ir a la Barra Insertar > Datos > Asistente de formulario de
insercin de registros
- Aadir un botn con las propiedades Accin: Ninguno, y Valor: Cancelar. En la

vista cdigo aadir una rutina JavaScript que permita volver a la pgina anterior.
<input type=button name=button value=Cancelar onclick=history.back(); />
- Se crea un formulario listo para agregar nuevos datos a la tabla Categoras.

- Disear la pgina mant_categorias_editar.php, a partir de la pgina anterior, dejar
la conexin creada. Borrar el contenido de la segunda divisin, y ubicar el cursor en
esa zona, luego ir a la Barra Insertar > Datos > Asistente de formulario de
actualizacin de registros
- Se crea un formulario listo para modificar el dato seleccionado en la pgina

mant_categorias.php.

- Crear una nueva pgina PHP de nombre mant_categorias_borrar.php. Crear la
conexin a la base de datos, y luego ir a la Barra Insertar > Datos > Eliminar
registro.
- Para poder probar esta accin, se aconseja que primero agregue algunos datos
adicionales, y luego los elimine.
- Para mejorar la apariencia de esta accin, vamos a insertar una rutina JavaScript en
la imagen Eliminar para que muestre un mensaje de confirmacin.
<a href="mant_categorias_borrar.php?CategoriaID=<?php echo

$row_rscategorias['CategoriaID']; ?>" onclick="return confirm('Est seguro que desea
eliminar el registro?');">
<img src="img/btnEliminar.jpg" alt="Eliminar" width="20" height="20" border="0" />
</a>

3. Restringir accesos.
- Para restringir el acceso a ciertas pginas, primero disearemos una pgina de
error, llamada error.php.
- Otra pgina de nombre login.php con un formulario que contenga los elementos
para ingresar el nombre de usuario y password.

- ir a la Barra Insertar > Datos > Conectar usuario
- Previsualizar y probar ingresando datos errneos, y datos correctos.
- El siguiente paso de seguridad, es evitar que se ingrese a una pgina restringida, si

esta es llamada directamente desde la barra de direccin del navegador. Para evitar
esto, primero abrir la pgina a restringir (mant_categorias.php), luego ir a la Barra
Insertar > Datos > Restringir acceso a pgina

- Puede repetir este procedimiento en todas las pginas que para ser mostradas
deban ingresar con un nombre de usuario y password vlidos.
- Para terminar, una vez ingresada a una pgina segura, esta debe mostrar un enlace
para cerrar la sesin actual. Abra la pgina mant_categorias.php, e insertar un
texto Cerrar sesin.
- Seleccionar el texto, y luego ir a la Barra Insertar > Datos > Desconectar usuario.
- Previsualizar en el navegador y comprobar el funcionamiento.

Bibliografa
1. ALBAN CAMPOS, Victor. COREL DRAW X5. Editorial MEGABYTE.

286pp.
2. SUAREZ CORDOVA, Jos. ADOBE FIREWORKS CS4. Editorial

Grapper. 275 pp.
3. EL GRAN LIBRO DE DREAMWEAVER CS4. Editorial MEDIAACTIVE.
4. DREAMWEAVER CS4. Valdes-Miranda, Claudia. Editorial ANAYA

MULTIMEDIA.

Manual Aplicativos Web I

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Aplicativos Web I

Cargado por

Copyright:

Formatos disponibles

ndice

Esta gua didctica es un material de ayuda institucional, perteneciente a las

La Organizacin SISE, lder en la enseanza tecnolgica a nivel superior,

Esta gua se divide en 2 mdulos y cada una de ellas en 9 semanas. La primera

INTRODUCCIN A COREL DRAW X5

- Es el Modo de color comn en todos los dispositivos de entrada y visualizacin de

- Esto es porque este modo de color produce la representacin en pantalla ms precisa

- Ayuda emergente: El formato y el contenido de la ayuda emergente se han mejorado

- Integracin VSTA: Para aumentar la flexibilidad de automatizacin, ahora puede utilizar

- Otras herramientas contenidas en la nueva versin sern detalladas ms adelante.

Tamao del Ancho y alto Orientacin Vertical y Establecer tamao y orientacin

Cmo puedo personalizar mi Entorno de Trabajo?

- O tambin, desde el botn de control que se halla en la Paleta de Colores.

- Al trazar un rectngulo cualquiera sobre el documento podr observar el puntero activo.

Observar la forma del puntero. Ahora activar la

Mover el centro Inclinar

- Trazar un rectngulo pulsando la tecla CTRL => se dibuja un CUADRADO.

- El icono en forma de candado permite igualar la medida de las esquinas.

- Adems, se puede ampliar el grosor del contorno.

- Trazar un rectngulo de la siguiente forma.

- Para establecer un color de relleno a la figura de un clic a cualquier color.

Contorno Azul Contorno Azul

Clic sostenido al color

- Trazar un polgono, luego cambiar el nmero de puntas o lados del polgono.

- Si pulsa la Herramienta Forma o pulsa la tecla F10, observar el cambio del

c. Herramienta Papel Grfico

4. Herramienta Zoom y Mano

- La Herramienta Zoom permite ampliar o alejar una imagen.

- Trazando un rea sobre una determinada zona.

- Realiza un conjunto de figuras como se muestra:

- Pulsar F3, y observar cmo se aleja.

- Pulsar F4, para observar todo el rea de

- Pulsar SHIFT + F4, para observar slo las

- Pulsar F9, para hacer una previsualizacin

- Formas Bsicas - Formas de Flecha

- Formas de Diagrama de Flujo - Formas de Llamada

- Para seleccionar objetos pulsar la Barra

contenga a los objetos (ejm: seleccione

- Seleccionar pulsando la tecla SHIFT y

- Seleccionar pulsando la tecla ALT y

- Para desagruparlos, ir al Men Organizar > Desagrupar (o pulsando CTRL + U).

- De manera ms rpida usar los siguientes atajos:

SHIFT + AVPAG Mover hacia atrs de todo (hacia atrs de la capa).

CTRL + REPAG Mover hacia delante de un objeto (avanzar una).

CTRL + AVPAG Mover hacia atrs de un objeto (retroceder una).

Pulsar T (Alineacin Superior) Pulsar B (Alineacin Inferior)

Pulsar L (Alineacin Izquierda) Pulsar R (Alineacin Derecha)

Pulsar E (Centrar Horizontal) Pulsar C (Centrar Vertical)

- Dibujar dos crculos de dimetro 50, alinearlos de la

- Aplicar INTERSECTAR, y luego mover.

- Pulsar la tecla + para duplicar, luego mover, y cambiar el centro de giro.

- D un clic al documento , y en las

- Seleccione el rectngulo y pulse CTRL + D varias veces y RECORTAR.

- Seleccionar los rectngulos y eliminarlos. La figura debe quedar as:

- Activar la Herramienta Texto (o pulsar la tecla F8) y digitar: adidas

- La Herramienta Bezier y la herramienta Pluma permiten crear lneas rectas y curvas.

- La Herramienta B-Spline es nueva en esta versin. Un B-spline es normalmente una

Tipo Categora Patrn Modelo

- La Herramienta Forma permite seleccionar los

Hacer doble clic en un segmento Hacer doble clic en un nodo para

- Los nodos pueden ser de tres tipos:

- Trazar la siguiente figura usando la herramienta bezier.

- Activar la herramienta Forma y seleccionar todos los nodos, y convertirlos a curva.

- Herramientas de Relleno: Uniforme, Degradado, Patrn y Textura.