Manual Aplicativos Web I - v0510 PDF

Índice
¾ Presentación ………………………………………………………. 3 3
¾ Modulo A
9 Semana 1 ……………………………………………………….. 4 4
9 Semana 2 ……………………………………………………….. 24
24
9 Semana 3 ……………………………………………………….. 47
47
9 Semana 4 ……………………………………………………….. 72
72
9 Semana 5 ……………………………………………………….. 85
85
9 Semana 6 ……………………………………………………….. 98
98
9 Semana 7 ………………………………………………………..111
111
9 Semana 8 ………………………………………………………..127
127
9 Semana 9 ………………………………………………………..140
140
¾ Modulo B
9 Semana 1 ………………………………………………………..150
150
9 Semana 2 ………………………………………………………..166
166
9 Semana 3 ………………………………………………………..180
180
9 Semana 4 ………………………………………………………..188
188
9 Semana 5 ………………………………………………………..205
205
9 Semana 6 ………………………………………………………..216
216
9 Semana 7 ………………………………………………………..229
229
9 Semana 8 ………………………………………………………..243
243
9 Semana 9 ………………………………………………………..258
258
¾ Bibliografía: ………………………………………………………...267
267
APLICATIVOS WEB I 2
PRESENTACIÓN
Esta guía didáctica es un material de ayuda institucional, perteneciente a las

especialidades de computación, Ingeniería de Software e Ingeniería de Redes
y Comunicaciones tiene por finalidad proporcionar los conocimientos de diseño
y publicación de sitios web estáticos y dinámicos en Internet.
La Organización SISE, líder en la enseñanza tecnológica a nivel superior,

promueve la elaboración de estos materiales de aprendizaje, en concordancia a
las actuales exigencias tecnológicas de nuestros tiempos, esperando que sirvan
de ayuda para facilitar el proceso de aprendizaje de los estudiantes.
Esta guía se divide en 2 módulos y cada una de ellas en 9 semanas. La primera

parte sienta las bases del diseño web, permitiendo conocer el manejo de
programas de edición vectorial, de tratamiento de imágenes y maquetación web,
brindando los conocimientos primarios tan necesarios al manejar las
herramientas de esta especialidad. Durante el segundo módulo se estudia el uso
de un software bastante usado por la mayoría de diseñadores web, que es
Adobe Dreamweaver, llegando hasta conocer cómo trabajar con bases de datos
MySQL y usar los datos mediante PHP.
APLICATIVOS WEB I 3
Contenido
- Introducción a Corel Draw X3.
- Entorno de trabajo de Corel Draw X3.
- Uso de Herramientas Básicas: Elipses, Rectángulos, Polígonos.
- Organizar objetos: Seleccionar, Agrupar y Desagrupar, Ordenar, Alinear y distribuir.
- Dar forma: soldar, intersectar y recortar.
- Transformaciones básicas: escala, reflejo, inclinación, posición, rotación y tamaño.
- Herramientas de dibujo vectorial: curvas, manejo de nodos, convertir a curvas.
INTRODUCCIÓN A COREL DRAW X3

CorelDraw es el más completo programa de diseño gráfico e ilustración, este programa trae
rápidas herramientas de ilustración, contiene efectos especiales fáciles de usar, que lo
convierten en el programa ideal para la creación de cualquier proyecto de diseño.
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 gráfico vectorial?

Es una composición de formas (líneas, elipses,
rectángulos, curvas y trayectorias complejas)
matemáticas. Este tipo de imágenes codificadas
matemáticamente no se deforman al sufrir un
cambio de tamaño, en consecuencia no pierde su
calidad.
Cómo es lógico, no necesitamos saber fórmulas
matemáticas complejas, el programa lo hace por
nosotros.
APLICATIVOS WEB I 4
Cómo iniciar el programa ?
• 1era Forma (clásica)
A través del Menú Inicio.
• 2da Forma
Cargando el ejecutable del programa (Menú Inicio > Ejecutar: CORELDRW ).
Una vez cargado el programa, se muestra una ventana que permite:
- Crear un NUEVO gráfico.
- Abrir alguno de los archivos usados

recientemente.
- Abrir un archivo desde cualquier

ubicación.
- Crear uno nuevo usando una plantilla.
- Revisar el CORELTUTOR, que es un

tutorial que podría revisar.
- Leer algunas novedades del programa.
APLICATIVOS WEB I 5
ENTORNO DE COREL DRAW X3
1
2
3
4
7 8
9
10
11
1. Barra de Título
2. Barra de Menú
3. Barra Estándar de Herramientas
4. Barra de Propiedades
5. Cuadro de Herramientas
6. Reglas (Horizontal y Vertical)
7. Mesa de Trabajo
8. Página de Dibujo
9. Paleta de Colores
10. Explorador de páginas
11. Barra de Estado
Las propiedades que se observan en la parte superior corresponden a las del Documento, por
ejemplo:
Tamaño del Ancho y alto Orientación Vertical y Establecer tamaño y orientación

Documento horizontal predeterminados actuales
APLICATIVOS WEB I 6
Establecer unidades de medida Valor de desplazamiento Posición de duplicados
Cómo puedo personalizar mi Entorno de Trabajo ?

- Si requiere visualizar más filas de colores que las que pueda mostrarse en la Paleta de
Colores: Menú Herramientas > Personalización > Paleta de Colores
Establecer el número de filas (por ejemplo 4).
APLICATIVOS WEB I 7
HERRAMIENTAS BÁSICAS
1. Herramienta Rectángulo
- Al trazar un rectángulo cualquiera sobre el documento podrá observar el puntero activo.
Observar la forma del puntero. Ahora activar la

Herramienta Selección
o también pulse la Barra Espaciadora.
Modificadores de tamaño
Modificadores de rotación
Modificadores de inclinación
Centro de Giro
- Pulsando sobre las flechas de las esquinas y moviendo el ratón podremos girar el objeto,
o cambiar el centro del giro del objeto.
Mover el centro Inclinar

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

- Trazar un rectángulo pulsando la tecla SHIFT => se dibuja desde su centro.
- Trazar un rectángulo de 60 mm de ancho y 30 mm de alto (1), una redondez de esquina
de 50 (2) , y un ancho de contorno de 1 mm (3).
1 2
APLICATIVOS WEB I 8
- Al mismo rectángulo, desactivar el candado que se halla en la redondez y establecer los
valores indicados en (6), rotar en 165 grados (4). Luego pulsar la tecla + para
duplicar la figura y moverla hacia la derecha. Reflejar horizontal (5).
4 5 6
- 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 más tonalidades de un color.
Sin color
Contorno Azul Contorno Rojo

Relleno Amarillo Relleno Rosado
Clic sostenido al color
APLICATIVOS WEB I 9
2. Herramienta Elipse
- Al trazar una elipse, al igual que con el rectángulo, se podrá cambiar de tamaño, 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:
APLICATIVOS WEB I 10
3. Herramienta Polígono
Espiral
Polígono
Estrella Papel Gráfico
Estrella compleja
- Trazar un polígono, luego cambiar el número de puntas o lados del polígono.
- 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 30 grados de
perfilado.
b. Herramienta Estrella Compleja
Trazar una estrella

compleja de 12 puntas y 3
grados de perfilado.
c. Herramienta Papel Gráfico
Antes de trazar la
cuadrícula o papel gráfico,
habrá que indicar el
número de filas y
columnas.
d. Herramienta Espiral
Se establece el número de
vueltas de la espiral, y el
tipo: simétrica o
logarítmica.
4. Herramienta Zoom y Mano
Zoom (pulsar Z) Mano (pulsar H)
- 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 cómo se aleja.
- Pulsar F4, para observar todo el área de

trabajo.
- Pulsar SHIFT + F4, para observar sólo las

figuras contenidas dentro de la página.
- Pulsar F9, para hacer una previsualización

a pantalla completa.
5. Herramienta Formas Básicas
Formas de Llamada
Formas Básicas
Formas de Flecha Formas de Orla
Formas de Diagrama de Flujo
- Formas Básicas - Formas de Flecha
- Formas de Diagrama de Flujo - Formas de Llamada
- Formas de Orla
ORGANIZACIÓN 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
Selección 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 detrás de otra, o enviarla hacia atrás de todo,
delante de una, o hacia delante de todo), se encuentran en el Menú Organizar > Orden
- De manera más rápida usar los siguientes atajos:

SHIFT + REPAG Mover hacia delante de todo (hacia delante de la capa).
SHIFT + AVPAG Mover hacia atrás de todo (hacia atrás de la capa).
CTRL + REPAG Mover hacia delante de un objeto (avanzar una).
CTRL + AVPAG Mover hacia atrás de un objeto (retroceder una).
4. Alinear y distribuir
- Las opciones de alineación y distribución (colocar una figura detrás de otra, o enviarla
hacia atrás de todo, delante de una, o hacia delante de todo), se encuentran en el Menú
Organizar > Orden
Pulsar T (Alineación Superior) Pulsar B (Alineación Inferior)
Pulsar L (Alineación Izquierda) Pulsar R (Alineación 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 Estándar de Herramientas.
Ejemplo
- Dibujar dos círculos de diámetro 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 rectángulo
de 3 mm de altura.
- Dé un clic al documento , y en las

propiedades, establecer el valor de
POSICION DE DUPLICADOS en:
- Seleccione el rectángulo y pulse CTRL + D varias veces y RECORTAR.
- Seleccionar los rectángulos y eliminarlos. La figura debe quedar así:
- Activar la Herramienta Texto (o pulsar la tecla F8) y digitar: adidas
Ejercicios
HERRAMIENTAS DE DIBUJO
A continuación pasaremos a estudiar las herramientas de dibujo usadas para crear diferentes
tipos de formas libres.
Pluma
Bezier
Mano alzada
- La Herramienta Mano Alzada permite dibujar líneas a mano alzada como si estuviera
haciendo esbozos en un cuaderno. A la hora de dibujar líneas o segmentos rectos, los
puede restringir a líneas rectas verticales u horizontales.
- La Herramienta Bézier y la herramienta Pluma permiten crear líneas curvas.
- La Herramienta Forma o activar pulsando la tecla F10 permite seleccionar
los nodos y manipularlos, además de añadir 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 dirección.
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 Bézier.
- Activar la herramienta Forma y seleccionar todos los nodos, y convertirlos a curva.
Ejercicios.
Contenido
- Herramientas de Relleno: Uniforme, Degradado, Patrón y Textura.

- Texto Artístico y de Párrafo. Adaptar texto a trayectos. Importar.
- Herramientas. Interactivas: Mezcla, Silueta, Envoltura, Extrusión, Sombra.
- Exportar a JPG, GIF.
HERRAMIENTAS DE RELLENO
Cuadro de diálogo Relleno de Textura
Cuadro de diálogo Relleno de Patrón
Cuadro de dialogo Relleno Degradado
Cuadro de dialogo Relleno Uniforme
F11
- El Relleno Uniforme SHIFT + se puede aplicar seleccionando los objetos
y haciendo un clic sobre un color de la paleta de colores que se encuentra a la
derecha.
- La otra forma de aplicar relleno uniforme a un objeto, es seleccionar 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 fíjate a la derecha en el cuadro
componentes (4 y 5), y verás que van variando los valores.
4 5
2
3
F11
- 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 Cónico Cuadrado
- Si selecciona la mezcla personalizada, se pueden agregar más colores al degradado (5).
- El Relleno de Patrón 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 tamaño del patrón, inclinación, 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
HERRAMIENTAS DE CONTORNO
Grosor de contornos
Sin contorno
Color de contorno
Cuadro de dialogo Pluma de Contorno
- En el Cuadro de Diálogo Pluma de Contorno
HERRAMIENTAS DE TEXTO
- Para trabajar con textos artísticos, 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 párrafo.
Texto Artístico Texto de Párrafo
Qué podemos trabajar con los Textos Artísticos?

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

y moviendo sobre los nodos de
cada carácter.
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 línea o trayecto

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

a trayecto
- Acercar el puntero hacia la

línea hasta encontrar la posición
adecuada , y por último dar un
clic.
Ejercicios.
Donde puedo encontrar más 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 más visitados son: www.1001fonts.com ,
www.fontsreactor.com.
- Ingresar a www.1001fonts.com
Seleccionar la categoría de la
fuente que desea buscar
- Para el ejemplo, seleccionaremos la categoría MOVIES (películas), 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 párrafo?
En los textos de párrafo podemos aplicar todos algunos de los tipos de formatos que son
conocidos en un procesador de textos, tales como:
Indica que el texto continúa.
Indica que el viene de otra zona
1
3
Indica la dirección del texto
- Aplicar columnas (Menú Texto > Columnas)
- Aplicar capitular o Letra Capital (Menú Texto > Capitular)
- Aplicar marcas o viñetas (Menú Texto > Marcas)
- Seleccionando cualquier forma, y activar la propiedad AJUSTAR TEXTO A PÁRRAFO,

luego elegir el tipo de ajuste y desplazamiento.
Ejercicios.
HERRAMIENTAS INTERACTIVAS
Sombra
Mezcla Envoltura
Silueta Extrusión
Distorsión Transparencia
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.
Número de etapas
- Se puede hacer que la mezcla siga un trayecto, para ello, se puede trazar una línea
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 líneas concéntricas (2) hacia el interior o exterior (1) de un objeto o texto
definido como artístico. Es posible definir una distancia entre silueta y silueta (3) y una
progresión 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 Distorsión 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 Rectángulo y texto que se aplicó la

aplicó Empujar y Tirar distorsión 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 artísticos y párrafos o imágenes de mapa de bits.
- Desde las propiedades se puede configurar la opacidad (1), fundido (2), dirección (3) y
color de la sombra (4).
1 2 3 4
5. Herramienta Envoltura Interactiva
- Están formadas por varios nodos que se pueden modificar para dar forma a la envoltura
y el resultado de esta acción es que el objeto cambia de forma.
6. Herramienta Extrusión Interactiva

- Crea un efecto tridimensional en un objeto o texto, generando una profundidad que
simula volumen. Es posible aplicar rellenos a una extrusión y efectos como luminosidad
y modificar el punto de fuga.
Se puede rotar la extrusión.
Color de extrusión amarillo. Color de extrusión 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 parámetros 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 edición, de un clic

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

clic derecho y elegir:
Extraer contenido.
2. Añadir perspectiva
- Permite aplicar un efecto 3D de alejamiento y acercamiento.
- Ir al Menú Efectos > Añadir perspectiva
Ejercicio.
3. Lente
- Al aplicar una lente a un objeto, modificará su apariencia y, lo que es más 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 alteración del color (como el
producido por las lentes Mapa de calor, Invertir y Aclarar, por ejemplo) a la distorsión
(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 imágenes.
- Menú Mapa de Bits > Efectos 3D > Rotación 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 Artísticos > Cubista
Ejercicios.
Contenido
- Diferencias entre Imágenes Físicas e Imágenes Digitales.

- Conociendo el Entorno de Adobe Photoshop CS3.
- Herramientas de Selección: lazo, lazo poligonal, lazo magnético, varita mágica.
- Montajes. Trabajar con capas.
- Corrección de Imágenes: Herramientas Pincel corrector, Parche, Tampón de Clonar.
- Ajustes de Color. Mascaras.
INTRODUCCIÓN A ADOBE
PHOTOSHOP CS3
Es un programa de retoque fotográfico, que perite creación de efectos, edición, retoques de
imágenes. Los cuales pueden ser empleados en páginas web, folletos en general y en la edición
de videos.
Imagen Digital
En nuestra vida cotidiana vemos multitud de imágenes (las fotografías de unas vacaciones,
leyendo una revista, navegando por Internet, etc.). Todas estas imágenes se diferencian
principalmente por el soporte en el que las vemos (dejando aparte las imágenes de televisión o
cine):
• Papel u otro objeto físico: fotografías tradicionales, imágenes impresas en papel de

revistas y folletos...
• Pantalla del computador: imágenes digitales.
Pero para ser más precisos las vamos a diferenciar por aquellos de que se componen:
IMÁGENES FÍSICAS
• Fotografía tradicional:
La imagen es formada por cristales sensibles a la luz empleados en las emulsiones
fotográficas. Estos cristales (haluros de plata) se vuelven negros cuando se exponen a la
luz, formando la imagen en el negativo.
• Imágenes impresas
Formada por los puntos de tinta de las impresoras (Cian, Magenta, Amarillo y Negro). Cada
punto se denomina DOT.
IMAGEN DIGITAL
Están formadas por datos, por código binario. Según sean esos datos se diferencian en:
• MAPA DE BITS
Está compuesta por Píxeles. Un PÍXEL es una unidad de información de valores de
color y luminosidad propios. El conjunto de diferentes píxeles componen la imagen total.
• IMAGEN VECTORIAL
Está compuesta por Vectores. Un Vector es una ecuación matemática que define una forma:
un vértice, un contorno, un relleno, etc. Varios vectores componen las diferentes formas
poligonales y colores de una imagen vectorial.
El Píxel
Una vez que uno se inicia en el mundo de la imagen digital no hace más que oír hablar del
PÍXEL ... píxel por aquí, por allá... Pero, ¿qué es un píxel?
Píxel es la abreviatura de la expresión inglesa Picture Element (Elemento de Imagen), y es la

unidad más pequeña que encontraremos en las imágenes compuestas por mapa de bits.
Un píxel tiene tres características distinguibles:
- Forma cuadrada
- Posición relativa al resto de píxeles de un mapa de bits.
- Profundidad de color (capacidad para almacenar color), que se expresa en bits. Esta
propiedad la veremos más detenidamente en la siguiente lección.
Cómo iniciar el programa?

A través del Menú Inicio.
• 2da Forma
Cargando el ejecutable del programa (Menú Inicio > Ejecutar: PHOTOSHOP ).
photoshop
ENTORNO DE ADOBE PHOTOSHOP CS3

1
2
1. Barra de Título
2. Barra de Menú
3. Barra de Opciones
5. Persianas contraídas o inactivas.
6. Persianas desplegadas o activas.
ACCIONES BÁSICAS
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,
diríjase 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 diríjase al Menú Archivo > Abrir, o pulsar CTRL + O. Abrir
la imagen auto.jpg
Si tiene activa la ventana Navegador, puede controlar el Zoom (1).
- También 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 SELECCIÓN
- 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 línea
punteada que indica el área seleccionada. Si comete algún error y desea eliminar la
selección, pulsar CTRL + D.
- Al realizar la selección se cometieron dos errores:
- Para AÑADIR 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 péguelo usando CTRL + V.
Observar la creación de una segunda capa.
- Abrir la imagen auto02.jpg, y utilice la Herramienta Lazo Poligonal con una
desvanesencia de 8 pixeles.
- Cópielo hacia la imagen original.
- Pulse la tecla V para activar la Herramienta Mover y asegúrese que este activa
la opción Seleccionar automáticamente, de lo contrario, tendrá que activar cada capa
para poder mover un objeto.
- Elija el auto B y pulse CTRL + T para aplicar una TRANSFORMACIÓN LIBRE. Con esta
opción se podrá cambiar de tamaño, rotar e inclinar un objeto.
- Aumente ligeramente el tamaño 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 Mágica. Establecer una
tolerancia de 10 pixeles y hacer clic sobre el fondo de color blanco. Luego invertir la
selección 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ú Selección > Modificar > Expandir:
20 pixeles, nuevamente ir al Menú Selección > 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 diálogo (Motivos de rocas,
naturales, etc.), o restaurar a los que están
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
- Pulsando ALT+BACKSPACE, se establece el color frontal sobre un área seleccionada.
- Pulsando SHIFT+ BACKSPACE, se abre el cuadro de diálogo que permite utilizar un

motivo.
- Crear una nueva imagen de 800x600 pixeles. Establecer como color frontal a #0c1323 y
pintar el lienzo pulsando ALT+BACKSPACE.
- 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 elíptico 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 opción Color (5).
CORRECCIÓN DE IMÁGENES
1. Herramienta Pincel Corrector

- Usado para corregir imperfecciones para que desaparezcan de la imagen, haciendo
coincidir la textura, iluminación, 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 píxeles de otra área o
un motivo. Al igual que la herramienta Pincel corrector, la herramienta Parche hace
coincidir la textura, la iluminación y el sombreado de los píxeles muestreados con los
píxeles de origen. También puede utilizar la herramienta Parche para clonar áreas
aisladas de una imagen
- Abrir la imagen parche.jpg, y establecer los parámetros de esta herramienta de la

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

flechas señalan los parches que he aplicado a la imagen de nuestra modelo:
3. Herramienta Tampón de Clonar
- La herramienta Tampón de clonar toma una muestra de una imagen, que más 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 señalada en

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

diámetro 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 Automáticos
- Abrir el archivo princesa.jpg. Observar que existe una falta de contraste y los colores
son opacos.
- Ir al Menú Imagen > Ajustes > Niveles Automáticos, o pulsar CTRL + SHIFT + L
- Los ajustes de niveles automáticos nos permiten modificar el contraste y el color de una
fotografía digital de forma automática
2. Curvas
- Abrir el archivo paisaje-con-casa.jpg.
- Se nos presenta como un gráfico de ejes X-Y que representa los valores de luminosidad
de los píxeles antes del ajuste (en la base) y los valores de salida, como quedarán al
final (en el lateral izquierdo). Se trata, simplemente, de modificar la posición de una línea
diagonal que indica para cada valor de entrada el valor de salida que le corresponde.
Sólo tenemos que pulsar sobre ella y arrastrarla para crear un nuevo nodo e iniciar la
transformación, bien de forma intuitiva con el ratón o introduciendo valores numéricos.
3. Niveles
- Abrir la imagen el-faro.jpg. Se puede observar que la imagen carece de iluminación.
- Ir al Menú Imagen > Ajustes > Niveles, o pulsar CTRL + L. Seleccionar el

cuentagotas que permite tomar muestra de un punto de iluminación, 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 configuración rápida de los
ajustes de sombras (1), medios tonos (2) e iluminaciones (3).
4. Tono/Saturación
- Abrir la imagen matrix.jpg. Utilizar las herramientas de corrección de imágenes para
borrar el texto.
- Ir al Menú Imagen > Ajustes > Tono/Saturación o pulsar CTRL + U.
4
1
- Activar la opción COLOREAR, y luego cambiar el Color (Tono) a 129, la Cantidad de

Color (Saturación) a 51 y la Iluminación (Luminosidad) a +2.
- También se puede aplicar sobre áreas seleccionadas.
5. Equilibrio de Color
- Abrir la imagen costa-equilibrio.jpg, observar que el color azul es más dominante que
los demás.
- Ir al Menú Imagen > Ajustes > Equilibrio de color, o pulsar CTRL + B
- Para este caso se aplica:
- El Equilibrio de color es la versión analítica 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 cromático 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 saturación y la luminosidad de las áreas
seleccionadas (3).
- Los botones permiten agregar o quitar muestras seleccionadas.
Contenido
- Uso de Textos: Textos y Máscaras de texto.

- Edición de imágenes: 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
práctica 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 selección 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 selección Marco Elíptico 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
transformación libre y rotar.
(3) Texto vertical (Bauhaus 93, regular, 18, enfocado, color azul).
- Crear una nueva capa y activar la Herramienta Máscara de Texto Horizontal. Usar la
fuente Bauhaus 93, 48, alineación centrada.
- Cuando activa la herramienta Mover, observe que se ha generado una selección con la
forma del texto digitado, ahora si lo desea puede aplicar un relleno de color sólido o
degradado.
- Y si abre una imagen y selecciona todo (CTRL + A), la copia, y en nuestro dibujo lo
pegamos dentro (CTRL+SHIFT+V), podremos colocar la imagen dentro del área
seleccionada.
EDICIÓN DE IMÁGENES
2. 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 selección y activar la herramienta Desenfocar con una intensidad de 100% y

un tamaño de pincel de diámetro 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.
3. 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 pálido.
- 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 gráficas que nos permiten aplicar efectos especiales a
nuestras imágenes. Photoshop incluye sus propios filtros, y se accede a ellos desde el menú
Filtro. Pero también 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 más
conocidos y utilizados destacan:
• Eye Candy, antes se llamaban Black Box, y son de Alien Skin.

• Kai´s Power Tools o (KPT) diseñados por HSC.
• Blade Pro utilizados para aplicar texturas y relieves.
• Filtros de Andrómeda.
• Filtros de Nik.
• Filtros de Extensis, etc, etc
1. Aplicando filtros básicos
- Crear una nueva imagen de 800x600 de color negro como fondo.
- Establecer los colores por defecto.
- Ir al Menú Filtro > Ruido > Añadir Ruido (cantidad de 25%, distribución gaussiana y
monocromático).
- 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 fusión 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/saturación en Tono: 30, Saturación: 50, Iluminación: 0
- Trazar una selección circular, usando el Marco Elíptico, y luego ir al Menú Selección >
Modificar > Desvanesencia: 2 pixeles. Invertir la selección 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
automáticos.
- 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/saturación al color deseado. Luego aplicar modo de fusión de
capa: Trama, y reducir la opacidad.
- Al finalizar utilizar la herramienta Borrador para que al final quede algo similar a:
2. Efectos con Textos
2.1. Texto Aceite

- Crear un Lienzo 800 x 600 píxeles, contenido: blanco
- Restablecer los colores estándar, presionar tecla D y pintar el lienzo.
- Usar texto horizontal (tipo arial black, color: #FFFFFF, tamaño 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/Saturación: CTRL + U
o Activar Colorear
o Tono : 70
o Saturación : 50
o Luminosidad : -20
- Ir al Menú Filtros > Artístico > Plastificado
o Intensidad : 20
o Detalle : 10
o Suavizar :7
2.2. Texto Fuego
- Usar texto horizontal (tipo arial black, color: #FFFFFF, tamaño 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, tamaño: 150, centrar el texto)
- Ir al Menú Selección > Cargar Selección > OK
- Invertir selección: CTRL + SHIFT + I
- Ir al Menú Filtro > Píxelizar > Cristalizar : Tamaño de Celda: 10
- Invertir selección: CTRL + SHIFT + I
- Ir al Menú Filtro > Ruido > Añadir Ruido
o Cantidad : 70
o Distribución : Gausiana
o Activar casilla monocromática
- 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 tamaño: CTRL + F
- Ir al Menú Imagen > Rotar Lienzo > 90º ACD
- Activas los ajustes de Tono/Saturación: CTRL + U
o Activar Casilla colorear
o Tono : 200
o Saturación : 30
o Luminosidad : 10
- Activar Herramienta Pincel y colocar en Lista Grande, seleccionar estrella 55
píxeles. El color debe ser #FFFFFF para resaltar el brillo del hielo.
3. Efectos de Textura
3.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
3.2. Textura de Piedra

- Crear un lienzo de 800 x 600, modo color RGB, contenido: blanco
- Restablecer los colores estándar, 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 Distribución : Gaussiana
o Monocromático : Activado
- Hacer clic a la ficha Canales y al lado derecho de la ficha clic al botón 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 Iluminación
o Estilo : Por Defecto
o Tipo de Luz : Foco
o Canal de textura : Piedra
3.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 > Añadir ruido
o Cantidad : 10
o Monocromática : 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 diámetro, 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 Distribución : Gaussiano
- En ventana Capas, cambiar el Modo de Fusión: Luz Suave.
Contenido
- Entorno de Trabajo.
- Usando Herramientas Vectoriales y Textos.
- Creando nuevas imágenes de mapa de bits.
- Usando herramientas de selección.
- Manejo de capas.
FIREWORKS CS3
Adobe Fireworks CS3 es uno de los programas más avanzados para diseñar y producir
elementos gráficos para las páginas Web. Con él podrás crear de manera rápida y sencillo
cualquier gráfico para una página Web, utilizando elementos visuales que harán que tu diseño
sea atractivo visualmente.
Cómo iniciar el programa?

• 2da Forma
Cargando el ejecutable del programa (Menú Inicio > Ejecutar: FIREWORKS ).
ENTORNO DE ADOBE FIREWORKS CS3
1
2
1. Barra de Título
2. Barra de Menú
3. Barra de Propiedades
5. Mesa de Trabajo
6. Paleta activas
- Crear una nueva imagen, pulsando CTRL+N, establecer los siguientes valores 1200
(ancho) y 600 (alto), resolución de 72 pixeles/pulgada y color de lienzo blanco.
- Una vez mostrado el lienzo, cambiar el color por NEGRO (1) y en las opciones de
exportación elegir JPEG Calidad Superior (2).
HERRAMIENTAS VECTORIALES
El conjunto de herramientas vectoriales se encuentras agrupadas en el grupo Vector, en el
Cuadro de Herramientas.
- Elegir la herramienta LÍNEA pulsando la tecla N, luego en las propiedades

establecer el color rojo (1), el tamaño de la punta en 2 (2) y la categoría de trazo en
Aceite > Cerdas (3).
1 2 3
- Trazar otra línea de color mostaza (##FFCC66) y repetir, de tal forma que se observe tal
como se muestra en la figura.
- Trazar una Elipse pulsando SHIFT para crear un círculo de diámetro 140 (1) de relleno
blanco (2) y categoría de relleno solido (3).
2 3
- En el grupo Colores, elegir el Relleno Degradado.
- En las propiedades elegir un degradado de Blanco (1) a Rojo (2), y de tipo Lineal (3) y
hacer un trazo de arriba hacia abajo.
1 2
- Activar la herramienta Texto o pulsando la tecla T, y digitar:
- Establecer las propiedades: Fuente Chiller, tamaño 32, color Rojo, Negrita y de
Suavizado tenue.
- Completar los textos: Cocina japonesa moderna (Chiller, 41, Negrita), Sashimi (Brush
Script Std, 92).
- Activar la herramienta Pluma o pulsar la tecla P, y trazar una forma curva. Es

similar a la herramienta Bézier de Corel Draw. Para darle una mejor forma a la línea,
activar la herramienta Subselección del grupo Selección, o pulsando la tecla A.
- Seleccionar la curva y el texto, luego ir al Menú Texto > Unir al trazado.
- Pulsar CTRL+T, para activar la Transformación Libre, que al igual que en Photoshop,
permite cambiar de tamaño y rotar. Al final tratar de obtener la siguiente muestra:
- Observar en la Ventana Capas (pulsar F2), seleccionar las capas que corresponden a
los trazados que forman las líneas, y agruparlas (Menú Modificar > Agrupar) o pulsar
CTRL+G.
- En la Ventana Páginas (pulsar F5), crearemos una segunda página (1).
- Seleccionar la capa del Grupo de la Página 1, y pegarla en la Página 2.
- Comenzaremos el diseño de la Página 2, aplicando una línea guía para alinear los
textos: Inicio, Quienes somos, Carta, Galería y Reservas.
- Activar la herramienta Rectángulo Redondeado aplicando color blanco, 40 y 20 de

opacidad.
- Pulsar CTRL+S y guardarla en alguna unidad con el nombre de Sashimi.png, la

extensión PNG es el formato por defecto con el que se guarda una imagen creada en
Fireworks.
HERRAMIENTAS DE MAPA DE BITS
- Abrir la Página 1, y utilizar las herramientas del grupo Ver, como la
herramienta Zoom o Lupa (pulsar la tecla Z), o la herramienta
Mano (pulsar la tecla H) para mover el área ampliada.
Al igual que en Photoshop, se puede emplear CTRL + +, para

acercamientos o CTRL + - para alejamientos.
- Ampliar el área central y utilizar la herramienta Pincel o pulsar la tecla B, y modificar el

logo central de la siguiente forma:
- Seleccionar ambas formas, el mapa de bits y trazado, y agruparlos pulsando CTRL+G.
- Aplicar un Filtro Sombrear e

Iluminar > Iluminado de color
Rojo.
- La forma final de la Página 1 debe quedar así:
- Copiar algunas de las formas a la Página 2.
- Pulsar CTRL + O para abrir la imagen Sashimi_01.jpg, y utilizar la herramienta Varita

Mágica (o pulsar la tecla W) para seleccionar la zona de color amarillo.
- Ir al Menú Seleccionar > Seleccionar Inverso, o pulsar CTRL+SHIFT+I, copiar
pulsando CTRL+C, y pegarlo en la Página 2.
- Abrir la imagen Sashimi_02.jpg, e ir al grupo Vector y activar la herramienta

Rectángulo Redondeado y trazar como se muestra en la figura de arriba. Luego hacer
un clic derecho y elegir Convertir trazado en recuadro, ahora se convierte en una
selección, copiar y pegar en la Página 2. Repetir con las imágenes a Sashimi_03 y
Sashimi_04.
- En la Ventana Capas, seleccionar la primera capa y añadir una Nueva imagen de mapa
de bits (1), luego activar la herramienta Recuadro Oval (2) del Grupo Mapa de Bits
según los valores indicados en la figura (3) y rellenar con color rojo, por encima del texto
Quienes somos (4).
CREAR Y DUPLICAR PÁGINAS

- Ir a la Ventana Páginas, para duplicar la Página 2, seleccionar esta página y arrastrar
hacia el icono Añadir/Duplicar página (1).
- Modificar la Página 3 (recién creada) para que adopte la apariencia que se muestra a
continuación:
- Crear la Página 4 de la misma forma, con la siguiente apariencia:
Ejercicio propuesto.
Realizar el siguiente diseño en Fireworks, una vez terminado guárdelo con el nombre
Company.png. Utilizar los archivos de la carpeta Company.
Contenido
- Creación de GIFS Animados y Banners.

- Creación de Botones.
- Mapas de imágenes e intercambio de imágenes.
- Divisiones y zonas interactivas.
- Añadir comportamientos. Creación de menús popup.
- Exportar desde Fireworks como gráficos y como HTML.
GIFS ANIMADOS Y BANNERS

- Abrir el archivo Mascota.png.
- Para crear un gif animado, tendremos que crear varios fotogramas con diferentes partes
que serán usadas como parte de la animación, iniciamos haciendo clic sostenido sobre
el Fotograma 1 hacia el icono Fotograma nuevo/duplicado.
- Usando herramientas vectoriales y de mapa de bits, realizar las siguientes
modificaciones.
- Activar las opciones Mostrar todos los fotogramas, y establecer el tiempo de demora de
visualización de los fotogramas (15/100 segundos).
- Exportar el archivo (Menú Archivo > Exportar), como gif.
- Activar las opciones Mostrar todos los fotogramas, y establecer el tiempo de demora de
visualización de los fotogramas (15/100 segundos).
Los Banners publicitarios, tienen la misma forma de trabajo, y dependiendo del sitio en donde
sea publicado, dependen de un tamaño establecido, duración y tamaño en KB. Por ejemplo, si
tenemos una web que ofrece artículos de artesanía podríamos reservar ciertos lugares en donde
podríamos alojar los banners publicitarios de otros negocios similares, como agencias de
turismo, etc.
Aquí un ejemplo de un banner encontrado en la web de monografías.com.
- En una nueva imagen de 728x150, y a una resolución de 72 pixeles/pulgada, fondo de

color negro, realizar el siguiente diseño en cada fotograma. Establecer una duración de
cada fotograma de 20 / 100 segundos y al final exportarlo como GIF.
- Una vez que haya sido completado y sea incrustado en una página web, se le puede
establecer el vínculo de dirección.
BOTONES
Los botones Fireworks son objetos de tipo símbolo que te permiten establecer algunos
comportamientos o estados que se observan cuando se manipula el puntero del mouse dentro
de la Web.
- Abrir el archivo Sashimi.png, luego seleccionar la Página 2, en el texto Inicio, y pulsar

F8 para convertir en un símbolo de tipo Botón de nombre: btnInicio.
- Hacer un doble clic en la zona de color verde que representa al botón creado.
Los estados de un botón son los comportamientos que se mostrarán en la pantalla cuando el
puntero del mouse trabaje con el botón. Los estados que puedes trabajar con un símbolo
botón son:
ESTADO DESCRIPCIÓN
Arriba El estado normal del botón al cargar la Web
Sobre Aparece cuando el cursor está sobre el botón
Abajo Cuando presionas el botón izquierdo sobre el botón
Sobre y Abajo Cuando el botón está presionado, si se sitúa el cursor sobre el
botón seguirá cambiando de aspecto.
Zona activa La zona de vinculación del botón
Los estados son predefinidos en Fireworks, de tal forma que tu trabajo consiste, realmente, en
modificar la apariencia que tendrá el botón en cada uno de los estados.
- En el estado Arriba, solamente estará el texto.
- Activar el estado Sobre, y hacer clic sobre el botón Copiar gráfico 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 botón Copiar gráfico sobre. Seleccionar
el ovalo y disminuir de tamaño.
- Al culminar, hacer clic sobre el botón Listo.
- De manera similar establecer botones para los textos: Carta (btnCarta) y Galería
(btnGaleria), de tal manera que se observen los siguientes botones en:
Página 2
Página 3
Página 4
- Ir a la Ventana Páginas y cambiar los nombres de las páginas haciendo doble clic en el
nombre.
- Establecer el vínculo de cada botón a las páginas que debe mostrar (1) y el destino (2) o
forma de apertura (usar _self si desea que la página se abra usando la misma ventana
del navegador en donde está el enlace o usar _blank, para abrir la página en una nueva
ventana).
- El botón Carta se tiene que vincular con carta.htm, Galería con galeria.htm. De
manera similar completar las otras páginas.
APLICATIVOS WEB I 2 104
- 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,
recién 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 botón de vínculo de la zona interactiva

correspondiente al número 1, y elegir Añadir comportamiento de Intercambiar
imagen.
- En la ventana que se muestra a continuación, elija la zona correspondiente a la imagen

central (1) y seleccione el número de fotograma al que se debe vincular, para este
primer ejemplo seleccione el Fotograma 1 (2).
- Repetir el procedimiento, el número 2 vincular con el Fotograma 2, y así sucesivamente.
- Exportar a HTML cada página dentro de una carpeta, y probar el funcionamiento de los
enlaces creados para el intercambio de imágenes, y de los botones.
Ejercicio propuesto
- Realizar el diseño de la siguiente página. Los archivos los puede encontrar en la carpeta
Aldo
- En la parte izquierda se encuentran una hilera de botones con vínculo hacia una página
de prueba. El estado de los enlaces es:
- Email y Registrar, son botones con vínculos 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 línea: <P> Cambio de párrafo, <BR> Salto de línea
- <HR> Regla Horizontal, <PRE> Texto preformateado, <CENTER> Centrado de texto e
imágenes
- Inserción de Imágenes: <IMG SRC=...> Inclusión de Imágenes, <IMG ... ALT=...> Texto
alternativo, <IMG .. ALIGN=...> Alineación de la imagen, <IMG .. BORDER=...> Borde de
la imagen, <IMG .. HEIGHT=... WIDTH=...> Tamaño de la imagen, <IMG .. HSPACE=...
VSPACE=...> Espaciado de separación de la imagen.
ESTRUCTURA DE UN DOCUMENTO
HTML
Conceptos Básicos
1. World Wide Web (WWW)

Digamos, simplemente, que es un sistema de información, el sistema de información
propio de Internet. Sus características son:
- Información por hipertexto: Diversos elementos (texto o imágenes) de la

información que se nos muestra en la pantalla están vinculados con otras
informaciones que pueden ser de otras fuentes. Para mostrar en pantalla esta otra
información bastará con hacer clic sobre ellos.
- Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso

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

cualquier navegador y desde cualquier parte del mundo.
- Pública: Toda su información está distribuida en miles de ordenadores que ofrecen
su espacio para almacenarla. Toda esta información es pública y toda puede ser
obtenida por el usuario.
- Dinámica: La información, aunque esta almacenada, puede ser actualizada por el

que la publico sin que el usuario deba actualizar su soporte técnico.
- 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
información de Web. Puede decirse que cada casa de software podría tener su
navegador propio, aunque los más 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 través de Internet.
5. URL
Es el Localizador Uniforme de Recursos, o dicho más claramente, es la dirección que
localiza una información dentro de Internet.
6. HTML
De momento, le basta saber que estas siglas se corresponden con la definición
"Lenguaje para marcado de hipertexto". Más claro aún, 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 (parámetros
que dan valor al tag).
HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser
vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo
tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al
usuario, siendo hoy en día la interface más extendida en la red.
Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto.
Además, y es aquí donde reside su ventaja con respecto a libros o revistas, el HTML nos permite
la introducción de referencias a otras páginas 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 carácter 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 utilizarían en
un futuro. Sin embargo, pese a esta deficiente planificación, si que se han ido incorporando
modificaciones con el tiempo, estos son los estándares del HTML. Numerosos estándares se
han presentado ya. El HTML 4.01 es el último estándar a septiembre de 2001.
Esta evolución tan anárquica del HTML ha supuesto toda una seria de inconvenientes y
deficiencias que han debido ser superados con la introducción de otras tecnologías accesorias
capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que
pueden sonaros son las CSS, Java Script u otros.
- 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,
recién 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 botón de vínculo de la zona interactiva

correspondiente al número 1, y elegir Añadir comportamiento de Intercambiar
imagen.
- En la ventana que se muestra a continuación, elija la zona correspondiente a la imagen

central (1) y seleccione el número de fotograma al que se debe vincular, para este
primer ejemplo seleccione el Fotograma 1 (2).
- Repetir el procedimiento, el número 2 vincular con el Fotograma 2, y así sucesivamente.
- Exportar a HTML cada página dentro de una carpeta, y probar el funcionamiento de los
enlaces creados para el intercambio de imágenes, y de los botones.
Ejercicio propuesto
- Realizar el diseño de la siguiente página. Los archivos los puede encontrar en la carpeta
Aldo
- En la parte izquierda se encuentran una hilera de botones con vínculo hacia una página
de prueba. El estado de los enlaces es:
- Email y Registrar, son botones con vínculos 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 línea: <P> Cambio de párrafo, <BR> Salto de línea
- <HR> Regla Horizontal, <PRE> Texto preformateado, <CENTER> Centrado de texto e
imágenes
- Inserción de Imágenes: <IMG SRC=...> Inclusión de Imágenes, <IMG ... ALT=...> Texto
alternativo, <IMG .. ALIGN=...> Alineación de la imagen, <IMG .. BORDER=...> Borde de
la imagen, <IMG .. HEIGHT=... WIDTH=...> Tamaño de la imagen, <IMG .. HSPACE=...
VSPACE=...> Espaciado de separación de la imagen.
ESTRUCTURA DE UN DOCUMENTO
HTML
Conceptos Básicos
1. World Wide Web (WWW)

Digamos, simplemente, que es un sistema de información, el sistema de información
propio de Internet. Sus características son:
- Información por hipertexto: Diversos elementos (texto o imágenes) de la

información que se nos muestra en la pantalla están vinculados con otras
informaciones que pueden ser de otras fuentes. Para mostrar en pantalla esta otra
información bastará con hacer clic sobre ellos.
- Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso

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

cualquier navegador y desde cualquier parte del mundo.
- Pública: Toda su información está distribuida en miles de ordenadores que ofrecen
su espacio para almacenarla. Toda esta información es pública y toda puede ser
obtenida por el usuario.
- Dinámica: La información, aunque esta almacenada, puede ser actualizada por el

que la publico sin que el usuario deba actualizar su soporte técnico.
- 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
información de Web. Puede decirse que cada casa de software podría tener su
navegador propio, aunque los más 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 través de Internet.
5. URL
Es el Localizador Uniforme de Recursos, o dicho más claramente, es la dirección que
localiza una información dentro de Internet.
6. HTML
De momento, le basta saber que estas siglas se corresponden con la definición
"Lenguaje para marcado de hipertexto". Más claro aún, 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 (parámetros
que dan valor al tag).
HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser
vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo
tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al
usuario, siendo hoy en día la interface más extendida en la red.
Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto.
Además, y es aquí donde reside su ventaja con respecto a libros o revistas, el HTML nos permite
la introducción de referencias a otras páginas 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 carácter 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 utilizarían en
un futuro. Sin embargo, pese a esta deficiente planificación, si que se han ido incorporando
modificaciones con el tiempo, estos son los estándares del HTML. Numerosos estándares se
han presentado ya. El HTML 4.01 es el último estándar a septiembre de 2001.
Esta evolución tan anárquica del HTML ha supuesto toda una seria de inconvenientes y
deficiencias que han debido ser superados con la introducción de otras tecnologías 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 acompañado al HTML es la diversidad de navegadores
presentes en el mercado los cuales no son capaces de interpretar un mismo código de una
manera unificada. Esto obliga al webmaster a, una vez creada su página, comprobar que esta
puede ser leída satisfactoriamente por todos los navegadores, o al menos, los más utilizados.
Además del navegador necesario para ver los resultados de nuestro trabajo, necesitamos
evidentemente otra herramienta capaz de crear la página en sí. Un archivo HTML (una página)
no es más 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 más complejos como Wordpad o Microsoft Word,
pues colocan su propio código especial al guardar las páginas 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 código, de esta manera tendremos una ventaja
para estudiar las etiquetas HTML de una manera más rápida.
- Iniciar el programa de Adobe Dreamweaver CS3, a través del Menú Inicio, en

Programas o de manera directa:
- Si sale alguna ventana inicialmente, cancélela, hasta que se muestre:
- Pulsar CTRL+N para crear un nuevo documento.
- Seleccionar Página 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 > Código y diseño.
- Ir al, para que a medida que se realice algún 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 información sobre el propio
documento (de ahí su nombre). Son utilizadas por los motores de búsqueda para ser
ubicadas al ser buscadas (por ejemplo Altavista o Google).
Ejemplo:
La línea 3 permite especificar la codificación de caracteres utilizada al codificar el

documento.
La línea 4 indica que el autor de la página es Pepe Lucho.
Las líneas 5 y 6 establecen las palabras clave en inglés (en) y en español (es).
La línea 7 indica una pequeña descripción de la página.
2. <title>
Establece el título de la página.
3. <script>
Rutinas de Javascript que son incluidas como funciones que serán llamadas desde otras
zonas del documento.
En el ejemplo, se ha insertado una función javascript llamada saludo, la que es invocada

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

color amarillo como fondo de la página.
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 código hexadecimal (1), o el nombre del
color en inglés.
<body bgcolor=”yellow” >
- Pulsar CTRL+S para salvar el documento, guárdelo 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 previsualización en el navegador por defecto
de su equipo.
- background: establece una imagen de fondo, que de ser muy pequeña, 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 hipervínculos 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 párrafo

- <h1>: establece encabezados. Existen hasta 6 niveles de encabezados: <h1>, <h2>,
…… <h6>.
- <br>: establece un salto de línea.
- <p>: determina los saltos de párrafo. El argumento align permite alinear el texto que
forma el párrafo.
- <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 características del texto (fuente, tamaño 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 SUBÍNDICE.
- <sup>Texto </sup>: etiqueta que formatea a SUPERÍNDICE.
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 números o viñetas a usar en la lista.
5. Etiquetas usadas en la inserción de imágenes
La etiqueta img permite insertar imágenes, la que a su vez depende de los atributos:
- src: especifica el origen del archivo gráfico (GIF, PNG o JPEG).
- alt: rótulo 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 imágenes con las que puedan estar cerca las imágenes, pueden ser
manejados a través de argumentos de alineación:
- Cuando la imagen funciona como hipervínculo, 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 página, sea textos u otras imágenes.
vspace = “30”
hspace = “20”
Ejercicio.
Diseñar la página siguiente, y luego guardarla con el nombre de personal.html.
Mi Web Personal – Microsoft Internet Explorer
Contenido
- Hipervínculos.
o Enlaces hacia zonas del mismo documento.
o Hacia páginas del mismo sitio.
o Hacia páginas de Sitios externos.
o Hacia correos electrónicos.
o Hacia archivos
- Rutas absolutas y relativas.
- Etiquetas usadas en la creación de Tablas.
- Formularios
HIPERVÍNCULOS
La característica principal de una página Web es que podemos incluir Hiperenlaces. Un
Hiperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra
página Web, un archivo, etc.
- Abrir la página creada en el ejercicio anterior, personal.html.
- Crear las páginas siguientes mis_aficiones.html y mis_favoritos.html:
Regresar
Regresar
1. Enlaces hacia zonas del mismo documento.

- En la página 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 páginas del mismo Sitio.

- En la página personal.html, crearemos un enlace para cada imagen que lo direccione
hacia las páginas mis_aficiones.html y mis_favoritos.html, respectivamente.
- Abrir la página mis_aficiones.html y crear el enlace para retornar a la página
personal.html, y de igual manera con mis_favoritos.html
- El estilo text-decoration permite que no se muestre el “típico” subrayado sobre el

enlace.
3. Enlaces hacia páginas de Sitio externos.

- Abrir la página mis_favoritos.html. En cada una de las imágenes 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 electrónicos.
- Abrir la página 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 página mis_aficiones.html, crearemos un par de enlaces que nos permitan abrir
documentos electrónicos 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 también podemos emplear las de rutas absolutas para llamar o localizar
archivos locales (de documentos en el mismo sitio), se desaconseja emplear este
método, puesto que si mueve el sitio a otro dominio (lugar, carpeta o servidor) se
romperán todos los vínculos de las rutas absolutas. Se recomienda el utilizar rutas
relativas para vínculos locales, puesto que estos vínculos 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 más adecuadas para emplear con vínculos
locales en la mayoría de los sitios Web. Son especialmente útiles cuando el documento
actual y el documento con el que se establece el vínculo se hallan en la misma carpeta.
También es posible usar una ruta relativa al documento para crear un vínculo con un
documento en otra carpeta, pero deberemos especificar la ruta empleando de la
jerarquía de carpetas desde el documento actual hasta el vinculado.
Para establecer un vínculo con un documento de la misma carpeta, indicaremos

solamente el nombre del archivo.
<a href="enlaces.html">Enlaces</a>
Para realizar un vínculo con una página 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 vínculo 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 CREACIÓN

DE TABLAS
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos
contenidos.
En un principio nos podría 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 más lejos de la realidad.
Hoy, gran parte de los diseñadores de páginas basan su maquetación en este tipo de artilugios.
En efecto, una tabla nos permite organizar y distribuir los espacios de la manera más optima.
Nos puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños
ocupados por distintas secciones de la página 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 página de calidad, tarde o temprano tendremos que vérnoslas con ellas y
nos daremos cuenta de las posibilidades nos ofrecen.
<table> </table> Define la creación de tablas.
<tr> </tr> Define la creación de una fila.
<td> </td> Define la creación de una celda.
- En un nuevo documento de nombre tablas.html, escriba dentro del body:
- Modificar los argumentos.
Veamos a continuación algunos atributos útiles para la construcción de nuestras tablas.
Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una línea:
align Justifica el texto de la celda del mismo modo que si fuese el

de un párrafo.
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 línea 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 línea 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
más estético. En un principio puede parecernos un poco confuso su uso pero un poco de
práctica será suficiente para hacerse con ellos.
En la siguiente imagen podemos ver gráficamente el significado de estos atributos.
Los atributos ROWSPAN y COLSPAN son también utilizados frecuentemente. Gracias a ellos es
posible expandir celdas fusionando éstas con sus vecinas. El valor que pueden tomar estas
etiquetas es numérico. El número representa la cantidad de celdas fusionadas.
Así, <TD COLSPAN="2">
Fusionara la celda en cuestión 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 fusionándose con la celda inferior.
Ejercicios.
En un nuevo documento HTML, diseñar la siguiente página 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 hipervínculos que permiten abrir las páginas:
- Recursos.html , página con fondo color amarillo y cabecera de primer nivel color azul y
como texto: Recursos Adicionales
- Enlaces.html , página con imagen de fondo: ECOLOGICO.JPG, cabecera de primer

nivel color rojo y como texto: Enlaces en la Web
- Horarios.html , página con el siguiente diseño
HORARIOS
8 11
12
9
Regresar
FORMULARIOS
Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas
páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos
personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en
estos campos son enviados al correo electrónico del administrador del formulario o bien a un
programa que se encarga de procesarlo automáticamente.
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 electrónico. Si queremos

procesar el formulario mediante un programa la cosa puede resultar un poco más compleja ya
que tendremos que emplear otros lenguajes más sofisticados. En este caso, la solución más
sencilla es utilizar los programas prediseñados que nos proponen un gran número de servidores
de alojamiento y que nos permiten almacenar y procesar los datos en forma de archivos u otros
formatos. Si nuestras páginas están 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 permitirán, 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 dirección de correo

electrónico:
<form action=”mailto:vsanchez@sise.edu.pe”>
También 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 información viaje en forma
encriptada a través 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 carácter especial. Es ideal para ingresar claves o passwords.
2. Campo Oculto
- Es usado para guardar valores entre páginas 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 Verificación
- Este tipo de elementos pueden ser activados o desactivados por el visitante por un
simple clic sobre la caja en cuestión.
5. Botón de Opción
- Existe otra alternativa para plantear una elección, 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 menús desplegables que nos permiten elegir una
(o varias) de las múltiples 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 botón previsto a tal efecto.
Ejercicios.
Elaborar la página: registros.html, con la siguiente apariencia:
• El Sexo está representado por RadioButtons.
• El Grado de Instrucción es una Lista de Opciones con los siguientes elementos:

Primaria, Secundaria, Superior Técnica y Superior Universitaria, en este orden.
Secundaria debe ser el valor seleccionado de manera predeterminada.
• Para recibir Boletines se emplea una Caja de Validación.
• Las consultas son enviadas a través de un Texto Largo.
• El botón ENVIAR se encarga de enviar los datos al correo electrónico:

admin@ iesrosa.edu.pe El botón LIMPIAR limpia los datos del formulario.
• En la página se presenta una tabla que permite organizar adecuadamente el contenido

de los elementos usados en la elaboración del formulario.
Contenido
- Javascript. Diferencias con el lenguaje Java.

- Conceptos. Diferencias con JAVA.
- Dónde y cómo 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 habrán dado cuenta de una
cosa: crear un documento HTML es crear algo de carácter estático, inmutable con el paso del
tiempo. La página se carga, y ahí termina la historia. Tenemos ante nosotros la información que
buscábamos, pero no podemos INTERACTUAR con ella.
Así pues, como solución 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 diseñado
específicamente 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
orígenes, como se ha podido leer hace unas líneas. Actualmente son productos totalmente
distintos y no guardan entre sí más relación que la sintaxis idéntica y poco más. 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
página.
• Orientado a objetos. Java es un lenguaje de programación 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 programación
estructurada como C o Pascal.
• Propósito. Java es mucho más potente que Javascript, esto es debido a que Java es un
lenguaje de propósito general, con el que se pueden hacer aplicaciones de lo más
variado, sin embargo, con Javascript sólo podemos escribir programas para que se
ejecuten en páginas web.
• Estructuras fuertes. Java es un lenguaje de programación fuertemente tipado, esto

quiere decir que al declarar una variable tendremos que indicar su tipo y no podrá
cambiar de un tipo a otro automáticamente. Por su parte Javascript no tiene esta
característica, y podemos meter en una variable la información que deseemos,
independientemente del tipo de ésta. Además, podremos cambiar el tipo de información
de una variable cuando queramos.
• Otras características. Como vemos Java es mucho más complejo, aunque también
más potente, robusto y seguro. Tiene más funcionalidades que Javascript y las
diferencias que los separan son lo suficientemente importantes como para distinguirlos
fácilmente.
Dónde y cómo 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 paréntesis.
2. Haciendo referencia a una función definida en la cabecera

- Se definen funciones en la zona de la cabecera, que luego son llamadas por el nombre y
usando algún evento. En el ejemplo, la función 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 ubicación.
- Si está utilizando un editor simple de texto, solamente tendrá que guardar el archivo con
extensión js, si de lo contrario utiliza Dreamweaver, lo puede hacer pulsando CTRL+N,
luego elegir Página en blanco > Javascript, luego clic al botón Crear.
Sintaxis y Estructuras de control

- Es case-sensitive, es decir, reconoce mayúsculas de minúsculas.
- 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 números (0-
9), letras mayúsculas o letras minúsculas).
- Los Operadores Aritméticos que usa son similares a los usados en el lenguaje JAVA.
NOMBRE OPERADOR EJEMPLO

Suma + 5+2
Resta - 6–3
Multiplicación * 8*3
División / 6/2
Módulo o Residuo % 7%2
Incremento ++ 2++
Decremento -- 3--
Al igual que los Operadores de Comparación:

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 Lógicos:

Y Lógico && (5 > 2) && (4==2)
O Lógico || (3 != 2) || (2 > 2)
Negación ! ! (3 == 2)
- Veamos un pequeño ejemplo, en un nuevo documento HTML, crear el siguiente diseño:
cantidad
precio
calcular
importe
- Observar que el botón calcular es un botón simple, que al ser pulsado llama a la función
calcular que será definida en la cabecera.
- La instrucción var es utilizada para declarar variables locales.
- Cada instrucción termina con un punto y coma (;).
- Como se tratan de elementos que no están 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 numérico con decimales (usar parseInt para valores enteros).
- Para alguien con conocimientos de Programación en JAVA, encontrará que son

similares a las usadas por Javascript, como:
Estructuras de Decisión
if (Expr.lógica){
….bloque de acciones verdaderas;
}else{
….bloque de acciones falsas;
}
Estructuras Selectivas Múltiples
switch(variable){
case “Valor1”:
…bloque de acciones1;
break;
case “Valor2”:
break;
default:
…bloque de acciones opcionales;
}
Estructuras Repetitivas
for(inicialización; condición; incrementos){

…bloque de acciones a repetir;
}
while(Expr.lógica){
}
- Veamos algunos ejemplos, abrir la página condicionales.html, escribir la función que

será llamada por el botón evaluar para calcular el promedio y mostrar la condición del
alumno (aprobado o desaprobado).
- Abrir la página selectivas.html, y completar las rutinas que permitan el ingreso de un

número entero (del 1 al 7) y que se muestre el nombre del día de la semana
correspondiente.
Principales objetos y eventos en Javascript.
1. Window
- Hace referencia a la ventana actual.
- open es un método que permite abrir una URL dentro de una ventana, en donde se
puede especificar sus dimensiones y ubicación. También puede ser usado en enlaces
para abrir páginas dentro de ellas.
- status es una propiedad que permite mostrar un string en la barra de estado del
navegador.
- prompt es un método que muestra una caja de entrada para que el usuario ingrese un
texto.
- alert es un método 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 situación.
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 información relativa al navegador que esté utilizando el
usuario.
4. Document
- El objeto document es el que tiene el contenido de toda la página que se está
visualizando. Esto incluye el texto, imágenes, enlaces, formularios, etc. Gracias a este
objeto vamos a poder añadir dinámicamente contenido a la página, o hacer cambios,
según nos convenga.
• Imprimir sobre el documento la fecha actual del sistema.

En una nueva página HTML crear una tabla de 3 filas y 3 columnas, y en una de las
primeras celdas insertar una etiqueta de división (<div>) con el id fecha.
Crear la función que utilice algunos métodos de la clase Date, y Array.
Llamar a la función fechaActual al cargar el documento.
• Rollover de imágenes
Insertar dos imágenes (productos_off, contactenos_off).
Contenido
- Introducción a Adobe Dreamweaver CS3.

- El Entorno de Trabajo.
- Configuración de un Sitio Local.
- Creación de Documentos HTML.
- Texto: Características.
- Listas,
- Caracteres especiales.
- Estilos CSS: creación y gestión de estilos.
- Hojas de Estilo.
DREAMWEAVER CS3
Dreamweaver CS3 es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver CS3 permiten agregar rápidamente diseño y
funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se
puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.,
de una forma muy sencilla y visual.
Además 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.
Editar páginas web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los
documentos con la extensión HTML o HTM, e incluir como contenido del documento el código
HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un
editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los
elementos de la página, al mismo tiempo que es más complicado crear una apariencia
profesional para la página.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y
que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe
Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas 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.
Configurando un Sitio Local

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar
o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas 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 imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro
de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar.
Esto es lo que se conoce como sitio local.
Después se podrán 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 organización de los archivos en un sitio permite administrar y compartir archivos, mantener

los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.
Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que
los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL
genérica.
Por ejemplo, si escribiéramos la dirección genérica http://www.peru.com en el navegador, éste

intentaría cargar la página http://www.peru.com/index.htm, por lo que se produciría un error en
el caso de que no existiera ninguna página con el nombre index.htm.
Procedimiento
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 público, quizá de manera predeterminada se muestren los archivos de algún
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 Configuración Básica (pestaña Básicas), y digitar como nombre del sitio
VETERINARIA.
5. La opción para usar tecnología de servidor se activa cuando tenga que diseñar una
página de tipo PHP, ASP, JSP, etc. Para nuestro caso no lo active.
6. La creación y modificación de los documentos que serán creados serán almacenados

inicialmente en una carpeta de nombre Veterinaria, ubicada en el Escritorio de su
equipo.
7. Como todavía no dispones de un servicio de Hosting (gratuito o dedicado), entonces no
configures nada en la opción Conexión al Servidor Remoto.
8. Luego se muestra un Resumen con la configuración creada.
9. Por último, de clic a Listo.
10. Observe su Ventana Archivos (si esta oculta pulse F8).
Nombre del Sitio Tipo de Vista (Local o Remota)
Ubicación
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 gráficos y muévalos hacia la carpeta imágenes.
13. Esto permitirá disponer de una mejor organización sobre los archivos que forma el sitio a
crear.
ENTORNO DE TRABAJO
1. Pulse CTRL + N, para crear un nuevo documento. Elija Página en Blanco > HTML >
Ninguno.
2. El Entorno de Trabajo de Adobe Dreamweaver tiene la siguiente apariencia:
1
6
2
3
1. Barra Insertar: Permite insertar elementos en un documento sin la necesidad de

recurrir al menú Insertar. Los elementos están clasificados según su categoría:
tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en
los botones se muestren los iconos de los objetos (como ocurre en la imagen
anterior), para que se muestren los nombres de los objetos, o para que se muestren
ambos a la vez.
2. Barra del Documento: Contiene iconos para ejecutar de forma inmediata algunas
otras operaciones habituales que no incluye la barra de herramientas estándar.
Estas operaciones son las de cambio de vista del documento, vista previa, etc.
3. Vistas del Documento: Muestra tres formas de trabajo, las que pueden ser
activadas por el diseñador en cualquier momento.
- Vista Código (4) : Permite visualizar el código HTML del documento

- Vista Dividir: En modo parcial el código y la vista diseño del documento
- Vista Diseño (5): Permite trabajar con el editor visual.
6. Paneles: Todas las ventanas que serán usadas en el diseño.
7. Inspector de Propiedades: Muestra y permite modificar las propiedades del

elemento seleccionado que son usadas de forma más frecuente. Por ejemplo,
cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación,
si está en negrita o cursiva, etc.
Propiedades del Documento

Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo
formato, es decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo
Propiedades de la página.
Procedimiento
1. Pulsar CTRL + N para crear una nueva página.
2. En la ventana que se visualiza, elegir PAGINA EN BLANCO, tipo de página: HTML ,

Diseño: NINGUNO. Clic en CREAR.
3. Cambiar el titulo de la pagina: VETERINARIA 2 DE MAYO
4. Para modificar las propiedades de la página, de clic al botón PROPIEDADES DE

PÁGINA en la ventana PROPIEDADES, o de clic derecho a la página 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 nómbrela como index.
Vistas de la página
- Vista CÓDIGO: se visualiza el lenguaje HTML (HyperText MarkUp Language), es
usado por diseñadores 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 DISEÑO

en la parte inferior.
- Vista DISEÑO: usado para insertar de manera directa los objetos en el documento
web. ACTIVE ESTE BOTÓN PARA TRABAJAR EN ESTA VISTA.
Procedimiento
1. Crear una nueva página HTML en Blanco y establecer las siguientes propiedades de
página:
- Tipo de Fuente: Verdana . Estilo: Cursiva
- Tamaño: 12
- Color del texto: #000066 (Azul Oscuro)
- Color de Fondo: (amarillo claro)
Digitar el siguiente texto: Escriba en Titulo: VETERINARIA LOS SAUCES
Pulse SHIFT + Enter, para aplicar un salto de línea
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)
− Tamaño: 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 página en el Navegador predeterminado.
MANEJO DE TEXTOS
El formato de textos se realiza seleccionando antes de todo los bloques que se van a modificar,
y luego establecer los valores en el inspector de propiedades.
1 5 6
2 3 4 7 8
1. Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede
ser encabezado, párrafo o preformateado.
2. Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en

lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la
tenga en su ordenador.
3. Tamaño: Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas
unidades, en píxeles, centímetros, etc.
4. Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido
en las propiedades de la página.
5. Estilo: Permite elegir algún tipo de estilo definido por el diseñador. Adicionalmente se
puede establecer negrita y cursiva. La opción Subrayar no aparece predeterminada
debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer
que el usuario pensara que se trata de un vínculo.
6. Alinear: A través de estos botones es posible establecer la alineación del texto de una
de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.
7. Lista: Estos botones permiten crear listas con viñetas o listas numeradas.
8. Sangría: Estos dos botones permiten sangrar el texto y anular la sangría.
Procedimiento
- Abra la página page1.html, y seleccione el primer texto. En la ventana Inspector de

Propiedades aplicar un encabezado de primer nivel (Formato: Encabezado1), color
rojo (señalado) y alineación centrada (señalado).
- Seleccione ARTÍCULOS RECOMENDADOS, y establecer un encabezado de tercer

nivel color azul.
- Seleccione los textos siguientes y aplicar un tipo de fuente del grupo VERDANA.
Luego completar el formato según se visualiza:
- Para aplicar subrayado a los subtítulos de color rojo, primero seleccione el texto,
luego dé un clic derecho y elija Estilo > Subrayado.
- Guardar los cambios.
- Abrir page2.html , y formatear el texto para obtener:
- El formato aplicado es:

Encabezado de nivel 2, color rojo, estilo cursiva, fuente Times New Roman.
Todo el texto siguiente es de fuente Verdana.
- Aplicar sangría izquierda
- Seleccionar y aplicar viñetas y sangría izquierda , luego ir al

Menú Texto > Lista > Propiedades.
Lista con viñetas
Estilo Cuadros
- Numeración con estilo letras, y sangría izquierda
- Guardar los cambios y visualizar en el navegador.
ESTILOS Y HOJAS DE ESTILO EN
CASCADA
1. Estilos
Los estilos CSS están en hojas de estilo de actualización automática (Hojas de Estilo en
Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el
color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada
vez que se desee repetir la asignación de esos mismos valores a otras partes del texto.
Procedimiento .
1. Configurar un sitio local de nombre TURISMOPERU. Luego abrir la página

tumbes.html y crear un estilo de nombre rotulo (Arial, Negrita, Cursiva, tamaño
18 y color Rojo), en la ventana CSS.
2. Establecer el nombre del estilo:
3. Configurar los valores solicitados para el estilo:
4. Seleccionar los textos que serán afectados por el estilo creado y modificar la
propiedad estilo.
5. Abrir la página piura.html y crear el estilo subtitulo (Arial, Negrita, Cursiva,

tamaño 18 y color Azul). Luego establecer sobre Ubicación e Historia.
2. Hojas de Estilo
Podemos exportar estilos que se encuentren incrustados en la página 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 diálogo Exportar estilos como archivo CSS que te permitirá
guardar todos los estilos incrustados en un nuevo archivo CSS.
Esta opción es muy útil si tienes los estilos incrustados en una página y queremos
utilizarlos en otras también. Simplemente pasamos los estilos incrustados a una hoja de
estilos y luego la adjuntamos en cualquier página que queramos utilizarlos.
Procedimiento .
- Pulsar CTRL+N para crear un nuevo documento Página en blanco > CSS, y
guardar con el nombre de estilos.css
- Abrir la página tumbes.html, y Adjuntar la hoja de estilos creada.
- Estando seleccionada estilos.css, crear un nuevo estilo de nombre título:
- Seleccionar el título y aplicarlo desde las propiedades.
- Activar la página libertad.html, adjuntar la hoja estilos.css, y aplicar el estilo

creado.
Contenido
- Imágenes: Tipos compatibles para la Web. Inserción de Imágenes.

- Hipervínculos: Tipos. Creación. Destino.
- Imágenes de Sustitución (Rollover).
- Mapas de imágenes.
- Elementos Flash: Películas, Botones y Texto Flash.
IMÁGENES
1. Tipos compatibles para la Web
El componente gráfico de las páginas web tiene mucha importancia, es el que hace que
estas sean vistosas y el que nos permite aplicar nuestra creatividad para hacer del
diseño de sitios una tarea agradable. Es también una herramienta para acercar los sitios
al mundo donde vivimos, sin embargo, es también el causante de errores graves en las
páginas y hacer de estas, en algunos casos, un martirio para el visitante.
Cuando usar gif?

El formato gif es ideal para imágenes muy simples: trazos de líneas, dibujos y textos en
blanco y negro o con pocos colores. También 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 imágenes que los gif, con dos grandes desventajas. La
primera es que no permite animaciones y la segunda es que sus características no son
totalmente soportadas por todos los browsers, especialmente en las antiguas versiones
de los mismos.
Su gran ventaja es que reduce el tamaño de las imágenes entre un 5% y 25% más 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 fotografías, es decir imágenes con muchísimos colores y pixels. No se les
vaya a ocurrir usarlo con imágenes simples porque perderían claridad y nitidez.
A continuación se puede ver una tabla comparativa de las principales características de
los formatos gráficos para crear páginas web:
2. Inserción de imágenes
Para insertar imágenes de manera sencilla, siga las siguientes recomendaciones:
- Guardar la página antes de insertar una imagen.
- Los archivos gráficos deben estar dentro de una carpeta determinada en la misma
ubicación del Sitio.
Procedimiento .
- Pulsar CTRL+N para crear un nuevo documento Página en blanco > HTML, y
guardar con el nombre de buscadores.html
- Ir a la Barra Insertar > Común > Imagen
- En el cuadro de diálogo Abrir que se muestre, seleccionar el archivo gráfico

(recordar respecto a los formatos), y elegir Google.jpg que se encuentra dentro de
la carpeta imágenes.
- Luego, definir un texto alternativo (opcional) para la imagen.
- Observar el resultado, y ver las Propiedades.
1 2 3
4
5
- 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 Diálogo Abrir, el texto
alternativo (3), editarlo usando el programa predeterminado para tratamiento de
imágenes (4), establecer un borde y alinearlo (5).
- La propiedad Alinear permite definir el texto circundante.
Predeterminado (Inferior) Superior Medio
Izquierda Derecha
- Completar la misma página para que tome esta apariencia:
HIPERVÍNCULOS
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de
una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
1. Tipos de Enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
- Referencia absoluta: Conduce al sitio en el que se encuentra el documento

utilizando la ruta completa del archivo.
La ubicación 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 están 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 método los enlaces se crean indicando la ruta
a partir de la raíz del sitio.
- Puntos de fijación: Conduce a un punto dentro de un documento, ya sea dentro del

actual o de otro diferente. Para ello el vínculo debe ser
nombre_de_documento.extension#nombre_de_punto. El punto se define dentro
de un documento a través del menú Insertar, opción Anclaje con nombre.
Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente
forma: ../secciones/seccion1.html#parte2
2. Creación de Enlaces
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para
ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y
seguidamente establecer el Vínculo en el inspector.
Procedimiento .
- Pulsar CTRL+O para abrir la página buscadores.html.
5 4
- (1) Enlace a un Sitio Web Externo: Clic a la imagen de Google, ir a las

propiedades:
Cuando una imagen se convierte en hipervínculo, se muestra un borde de color

azul, si no desea que se muestre establecer la propiedad Borde: 0
- (2) Enlace a una página web del mismo Sitio: Clic a la imagen de la casita:
- (3) Seleccionar el texto SISE.
- (4) Enlace hacia un correo electrónico: Seleccionar Contáctenos
- (5) Enlace hacia un archivo: Seleccionar aquí.
3. Destino de los Enlaces

La página donde se abrirá la página, 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 vínculo o
en el conjunto de marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
IMÁGENES DE SUSTITUCIÓN
La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al
pasar el cursor del mouse encima de la imagen en cuestión, 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 imágenes, una para el estado Off y otra para el estado On.
Procedimiento .
- Pulsar CTRL+O para abrir la página buscadores.html, elimine las imágenes

correspondientes a Altavista y a Yahoo.
- Ir a la Barra Insertar > Común > Imagen de Sustitución
- En la ventana que se muestra a continuación se debe seleccionar la imagen
original o inactiva y la imagen de sustitución o aquella que se mostrará cuando el
puntero del mouse se halle encima de la imagen, un texto alternativo y el
hipervínculo.
- De manera similar modifique la imagen para Yahoo, y previsualizar en el

navegador.
MAPAS DE IMÁGENES
Un mapa de imagen simplemente es una imagen que se ha divido en varias zonas interactivas.
Estas zonas interactivas generaran una cierta acción al hacer clic en ellas. Estas acciones
implican abrir un nuevo documento, esto se hace a través de vínculos.
Procedimiento .
- Pulsar CTRL+O para abrir la página 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 vínculo para dirigirse a una página 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 animación creada en Flash tiene extensión SWF, el cual puede ser insertado en un
documento HTML.
Procedimiento .
- Pulsar CTRL+O para abrir la página presentacion.html, la que puede encontrar

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

que está formada por una tabla con una columna y cinco filas. Establecer las
siguientes propiedades de página:
Color de Fondo : #D4F0E1
Imagen de Fondo : imágenes/línea.jpg
Titulo: : BIENVENIDOS A TURISMO PERÚ
- En la segunda celda, insertar la animación Flash que se encuentra en

flash/inicio.swf .
1 2
- En las propiedades puede ajustar el tamaño de la animación (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 válido para cualquier animación Flash). De un clic al texto y
luego ingrese a la propiedad Parámetros 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 posición indicada:
- Ir a la Barra Insertar > Común > Flash Video, y en la ventana que se muestre
seleccionar los siguientes valores:
Contenido
- Tablas: Creación y Formato.

- Añadir y eliminar filas y columnas.
- Añadir, dividir y combinar celdas.
- Tablas de Diseño.
TABLAS
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las
tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto,
y otra serie de cosas que sin las tablas serían imposibles de realizar.
Hasta hace poco, la mayoría de las páginas web se basaban en tablas, ya que resultaban de
gran utilidad al mejorar notablemente las opciones de diseño, hoy en día, la organización de los
elementos dentro de una página web utiliza un estándar en el que se emplean la etiqueta DIV.
Procedimiento .
- Pulsar CTRL+N para crear un nuevo documento, el que debe guardar con el
nombre de tablas.html.
- Ir al Menú Ver > Modo de Tabla > Modo Estándar, para estar seguro de
encontrarnos en Modo Estándar y no en Modo Diseño o Expandido.
- Ir a la Barra Insertar > Común > Tabla
- En el cuadro de diálogo Tabla, establecer el número de Filas y Columnas, el ancho
de la tabla en pixeles o en porcentaje de acuerdo al tamaño 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. Alineación del contenido: Horizontal o Vertical.
4. Ancho y alto del elemento seleccionado.
5. Imagen de fondo.
6. Color de fondo.
7. Color del borde.
- Para el caso de la tabla:

1 2 3 4
5
6
1. Modificar el número de filas y columnas.

2. Ancho de la tabla en pixeles o en porcentaje.
3. Relleno y espaciado de las celdas.
4. Alineación del contenido.
5. Grosor del borde.
6. Color de Fondo, Color del borde e Imagen de fondo.
- Según esto, modificar la tabla anterior y obtener:
- Si requiere insertar filas o columnas, lo que puede hacer es ubicarse en la celda
cercana a donde desea hacer la modificación, y hacer clic derecho para seleccionar
la opción adecuada desde el menú contextual.
- Insertar 2 columnas, después de la columna actual, y completar la tabla.
- En las opciones del menú contextual también puede encontrar la forma de combinar
celdas o dividirlas.
- Crear una siguiente tabla en una nueva página de nombre horarios.html.
TABLAS DE DISEÑO
En el modo de diseño, se utilizan celdas y tablas de diseño para definir el diseño de la página
antes de añadir el contenido. Por ejemplo, puede dibujar una celda a lo largo de la parte superior
de la página para insertar un gráfico de encabezado, otra celda en la parte izquierda de la
página para insertar una barra de navegación y una tercera celda en la parte derecha para
insertar el contenido. A medida que añada el contenido, puede mover las celdas según
convenga para ajustar el diseño.
Procedimiento .
- Pulsar CTRL+N para crear un nuevo documento, el que debe guardar con el
nombre de portada.html.
- Ir al Menú Ver > Modo de Tabla > Modo Diseño, o pulsar ALT+F6.
- Ir a la Barra Insertar > Diseño > Tabla de Diseño o Celda de Diseño.
- El enlace Salir, permite volver al Modo Estándar, o pulsar nuevamente ALT+F6.
- Insertar una tabla de diseño, y dentro tres celdas de diseño con la siguiente
apariencia.
- Insertar una imagen en la celda superior, mientras que en la celda de la izquierda

insertaremos otra tabla que a su vez contenga 6 celdas.
- Completar de tal manera que se muestre:
- Modificar y previsualizar en el navegador.
Ejercicios.
- Crear la página deportes.html, con la siguiente apariencia:
Contenido
- Maquetación de Páginas Web usando estilos CSS.

- Taller de Diseño Web
MAQUETACIÓN DE PÁGINAS WEB

USANDO ESTILOS CSS
En pocas palabras, maquetar una página web es pasar el diseño a código HTML, poniendo
cada cosa en su lugar (una cabecera, un menú, etc.).
Hasta hace unos años la única manera de maquetar una página web era mediante tablas
HTML (<table>), pero esto tiene muchas desventajas y limitaciones, por eso la técnica de
maquetación fue evolucionando con los años hasta llegar al punto donde no se usan tablas, si
no capas (los famosos DIVs) a las que se le dan formato mediante CSS.
¿Capas, layouts, divs? ¿Qué es eso?

Las capas, layouts o divs son la misma cosa con distinto nombre, para tener un concepto
mental más fuerte de lo que son, podemos imaginarlos como contenedores o bloques donde
podemos meter lo que queramos dentro (imágenes, texto, animaciones, otro bloque, o todo al
mismo tiempo) a los que se le asigna un ancho, alto y posición, de esta manera se van a ir
posicionando consiguiendo la estructura que queremos. Veamos un ejemplo gráfico:
Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera:
- Capa 1: es la capa principal y contenedora
- Capa 2: capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;)
- Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta ultima
(float:left; margin: 10px).
Como crear un DIV

La forma de crear una capa DIV es así: <div></div>
Recordar que todo contenido visible de la página debe ir entre las etiquetas
<body></body>.
En la vista código HTML quedaría así:
<html>
<head>
<title>PAGINA DE PRUEBA</title>
</head>
<body>
<div>¡Esta es mi primer capa!</div>
</body>
</html>
Dando formato a un DIV

Esto se hace con estilos CSS. Para darle formato a un DIV tenemos que identificarlo de
alguna forma, para esto existe el atributo ID, en el pondremos el nombre del DIV para
luego llamarlo desde la hoja de estilos, la forma de escribirlo es así:
<div id="capa1">¡Esta es mi primer capa!</div>
Como podemos ver, a esta capa le pusimos "capa1" de nombre, ahora solo nos falta
abrir la hoja de estilos que creamos y llamarlo de esta manera:
#capa1{
background-color:green;
esto hará que el color de fondo de esa capa sea verde, en la siguiente imagen se puede
apreciar:
Como vemos, el color se estira, esto es porque no le definimos un ancho determinado,

para hacer agregaremos el atributo width a #capa1 de la siguiente forma:
#capa1{
width:210px;
Ahora ya es visible el fondo verde en un área mucho más corta como en este ejemplo,
pero ¿qué pasa si queremos que la capa sea más alta?
Simple, le agregaremos el atributo height con el valor en pixeles que queramos, de esta
forma:
#capa1{
width:210px;
height:300px;
Con esto ya tendremos una especie de rectángulo verde donde podremos agregar texto como
queremos.
Flotar y acomodar un DIV

La maquetación por divs CSS se basa en "flotar" unas capas dentro de otras para
conseguir la estructura que queremos, para esto se utiliza la propiedad float.
Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los siguientes
valores:
• none: no flota la capa.
• left: flota la capa hacia la izquierda.
• right: flota la capa hacia la derecha.
Siguiendo con el ejemplo, vamos a crear otra capa #capa2, le vamos a aplicar otro color
de fondo con el mismo alto y ancho pero vamos a flotar ambas capas hacia la izquierda,
quedaría así:
#capa1{
width:210px;
height:300px;
float:left;
}
#capa2{
width:210px;
height:300px;
background-color:gray;
float:left;
}
y el código HTML sería este:
<html>
<head>
<title>Curso de maquetacion CSS</title>
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="capa2">¡Esta es mi segunda capa!</div>
</body>
</html>
Nota: asegúrate de escribir bien los ID, tanto en la hoja de estilos como en el código
HTML, que coincidan en ambos, de lo contrario no funcionará.
Esto se debería ver más o menos así:
Ahora, ¿qué pasa si aplicamos un margen izquierdo a la capa2?
#capa2{
width:210px;
height:300px;
background-color:gray;
float:left;
margin-left:10px;
Se vería así:
Evitar que un DIV o capa se superponga con otra
Seguramente cuando estés maquetando tu sitio web necesitarás tener una capa o bloque
que no tenga capas a sus lados, para eso está la propiedad CSS Clear.
Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa se
posicione a cualquiera de los lados, los valores que admite son estos:
• left: no deja que una capa flote a la izquierda

• right: evita que una capa flote a la derecha
• both: evita que haya capas flotantes en cualquiera de sus lados
Nosotros lo usaremos para crear, por ejemplo, el pie de página.
Siguiendo con el ejemplo que hicimos, vamos a crear una tercer capa #capa3 y le
aplicaremos esta propiedad, añadiremos un ancho de 430 pixeles y un alto de 30
pixeles, también le aplicaremos un color de fondo naranja.
#capa3{
width:430px;
height:30px;
background-color:orange;
float:left;
clear:both;
el código HTML quedaría así:
<html>
<head>
<title>Curso de maquetacion CSS</title>
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="capa2">¡Esta es mi segunda capa!</div>
<div id="capa3">¡Esta es mi tercer capa!</div>
</body>
</html>
Esto dará como resultado algo parecido a esto:
Ahora vamos a agregar un margen superior para separa un poco el pie de página
(#capa3) de las demás capas o divs.
#capa3{
width:430px;
height:30px;
background-color:orange;
float:left;
clear:both;
margin-top:10px;
TALLER DE DISEÑO 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 también en Adobe Photoshop, con
lo que se tiene las medidas de cada uno de los elementos que estarán contenidos
en el documento.
100 95 420 285
129
27 141 195
110
330 110
615 285 110
2. Usar la herramienta División y establecer las siguientes zonas:
3. Exportar y guardar las imágenes en una carpeta imágenes 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 código elaborado posee etiquetas table,
y las que a su vez podrían ser convertidas a capas a través del Menú Modificar >
Convertir > Tablas en Divs PA.
Nosotros lo haremos usando divisiones flotantes no absolutas.
5. Las imágenes que corresponden a los enlaces Quienes somos, servicios, etc.,
serán imágenes de sustitución, las que podremos editar directamente desde
Fireworks. En la ventana Archivos, activar la pestaña Activos y editar cada una de
las imágenes.
6. En Fireworks, a la imagen abierta aplicar un filtro de Matiz/Saturación (Matiz: 248,

Saturación: 52, Luminosidad: 44). Guardar como veterinaria_r3_c1_on.gif
(finalizar con el termino on). Repetir el procedimiento con las imágenes de los
enlaces Servicios, Productos, Instalaciones y Contáctenos.
7. Crear una nueva página y guárdela con el nombre de index.html.
8. Lo primero es insertar una capa DIV contenedora, a partir de la Barra Insertar >
Diseño. Luego asignar un ID específico (contenedor).
9. Clic al botón Nueva regla CSS para aplicar un estilo a la división.
10. Aplicar un estilo para definir el ancho de la división.
11. Para una mejor organización de los elementos, dividiremos en 3 zonas principales:
encabezado, enlaces y central.
12. Insertar otro DIV de nombre encabezado y aplicar los estilos:
Categoría Valores
Cuadro Alto: 129
Ancho: 615
Flotar: Izquierda
Fondo Color de fondo: blanco
13. Insertar otro DIV de nombre textosup y aplicar los estilos:
Categoría Valores
Cuadro Ancho: 129
Alto: 27
Flotar: Derecha
14. Insertar otro DIV de nombre enlaces y aplicar los estilos:
Categoría 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:
Categoría Valores
Cuadro Ancho: 900
Alto: 330
Borrar: Ambos
Fondo Color de fondo: blanco
16. Se debe mostrar el siguiente diseño:
17. Borrar el contenido del encabezado, y luego ir a la ventana Archivos, y arrastrar las
imágenes del encabezado.
18. Dentro de la división central, como se observa en la imagen inicial, está formada
por cuatro partes. Crearemos divisiones dentro de la división 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. Diseñar las siguientes páginas:
qsomos.html
servicios.html
productos.html
Contenido
- Inserción de Componentes Multimedia: Sonido, Plugins y ActiveX.

- Divisiones absolutas o Capas
- Manejando capas con comportamientos
- Comportamientos Avanzados: mensajes emergentes, texto en la barra de estado, carga
previa de imágenes, abrir una ventana del navegador, Menús de Salto.
INSERCIÓN DE COMPONENTES
MULTIMEDIA
1. Insertar sonido a una página web
No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen
estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar
también sonido en cada página que se visita puede resultar algo molesto. A pesar de
ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla
más atractiva. Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad
de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el
sonido de la página puedan desactivarlo.
Para agregar sonido a una página web debe tener en cuenta que los formatos
compatibles son wav, mid y mp3, sin embargo, los mp3 resultan ser más pesados por lo
que tardaran más 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 ubicación.
- Abrir la página index.htm, y ubicarse en la etiqueta body. Lo puede hacer

rápidamente haciendo un clic sobre el selector de etiquetas.
- En la vista código, escribir:
2. Insertar Plugins
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.
Procedimiento .
- Abrir la página 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 > Común
- Seleccionar el archivo de audio (grupo_5.mp3), y establecer los parámetros de

uso:
- Deberás definir el ancho (An: 272) y alto (Al: 24), así como la alineación. El
parámetro autostart en false, define que al cargar la página no se escuche el
audio hasta que el usuario lo inicie, y el parámetro loop en false, establece que
una vez que termine el audio, no se repita.
- Añadiendo el logo del grupo musical quedaría 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 parámetros los mismos que el anterior.
http://www.apple.com/quicktime/download/
3. Insertar ActiveX
Comúnmente al incrustar películas de QuickTime, hay un elemento de objetos
alrededor del elemento de inserción. El elemento objeto se utiliza para incluir objetos
como imágenes, audio, videos, applets de Java, películas de tiempo rápido, y
animaciones en Flash. La inclusión de este elemento al incrustar su película añade
soporte adicional para el plug-in necesario para reproducir la película. Este elemento
también aumenta la compatibilidad del navegador.
Procedimiento .
- Abrir la página 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 > Común
- 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
Parámetros:
ShowControls : true/false. Muestra los controles.
ShowStatusBar : true/false. Muestra una barra de estado.
Autostart : true/false. Inicio automático.
<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 código 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>
DIVISIONES ABSOLUTAS O CAPAS

Un elemento PA (posición absoluta) es un elemento de página HTML que tiene una posición
absoluta asignada. Los elementos PA pueden contener texto, imágenes u otros contenidos que
se pueden situar en el documento HTML.
Se pueden colocar elementos PA delante o detrás 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 continuación, insertar un segundo elemento PA, con texto y un
fondo transparente, delante del primero, etc.
Procedimiento .
- Configurar el sitio local BRASIL, que apunte hacia dicha carpeta. Abrir la página
index.htm.
(1) Insertar el elemento flash desde flash/presentación.swf
(2) Insertar el video flash, desde flash/video01.flv
(3) Crear tres zonas interactivas usando mapas de imágenes para las tres
provincias señaladas.
- Ir a la Barra Insertar > Común > Dibujar Div PA
- Establecer las propiedades ancho (An.), alto (Al.), Color de fondo y Visibilidad (Vis).
- Insertar otras dos Div PA con las siguientes apariencias. Puede mostrar u ocultar las
PA desde la Ventana PA (Menú Ventana > Elementos PA).
MANEJO DE CAPAS USANDO
COMPORTAMIENTOS
Los comportamientos son acciones que suceden cuando los usuarios realizan alguna acción
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 través de la ventana Comportamientos, por lo que no es necesario escribir el código JavaScript
para programarlos.
Procedimiento .
- Abrir la página 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 botón 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 botón 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 botón Mostrar. En la ventana
Comportamientos, seleccionar el evento onMouseOver (cuando el puntero se halle
dentro de la zona).
COMPORTAMIENTOS AVANZADOS
En el tema anterior, se trato el uso de comportamientos, y es así que entramos a manejar de
forma fácil, usando Dreamweaver, la parte interactiva del diseño de páginas web, sin requerir
demasiados conocimientos de JavaScript. Así podríamos incluir diferentes acciones.
Procedimiento .
- Abrir la página index.htm, del Sitio Local Brasil, usado en el tema anterior.
- Ir al Menú Ventana > Comportamientos, o pulsar SHIFT+F4. Agregar el

comportamiento a utilizar.
- Asegúrese que el documento este activo, y elija el comportamiento Mensaje
emergente y en el evento onLoad, y establecer:
- Seleccione el texto Contáctenos que se encuentra en la parte inferior izquierda.
- Elija el comportamiento Abrir ventana del navegador y en el evento onClick, y

establecer:
- Hacer un clic sobre el documento, y agregar un comportamiento Definir texto >

Establecer texto de la barra de estado.
- Abrir la página contacto.html, y seleccionar el texto Cerrar ventana. Agregar el

comportamiento Llamar JavaScript y la acción onClick.
- La rutina window.close() cierra la ventana actual.
Contenido
- Creación de Formularios en Adobe Dreamweaver CS3: Campo de Texto, Área de Texto,

Casilla de Verificación, Radio Button, Listas, Botones
- Publicación de Sitios Web
- Hosting y Dominio. Sitios Remotos: Configuración.
- El Panel Archivos. Sincronizar Sitios.
CREACIÓN 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 electrónico (si es que el cliente de correo se halla
configurado), o hacia una página dinámica 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 programación.
Procedimiento .
- Crear una página 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 diseño:
- Insertar un Campo de Texto, en donde el usuario podrá escribir sus Apellidos.
- Establecer en la propiedad Tipo: una línea, para Apellidos, Nombres y Nombre de
Usuario, ancho de caracteres (Ancho car.) en 30. En Contraseña elegir el tipo
Contraseña, ancho de 6 y caracteres máximo (Car. Máx) en 6.
- En email, establecer el valor inicial (Val inicial) en @, en condiciones de uso el tipo

varias líneas, ancho de caracteres en 40, número de líneas (Líneas núm) en 3, en
valor inicial un texto.
- Insertar en el sexo, dos botones de opción.
- Al botón de opción 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 países de residencia.
- Insertar Casillas de Verificación 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 método de envío (get / post), y la acción (si será enviado a
un correo o procesará un documento dinámico 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.
PUBLICACIÓN DE UN SITIO WEB
La publicación 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 tecnológica 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 través de una URL, para lo que se debe adquirir un dominio.
1. Hosting
El alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios de
Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier
contenido accesible vía Web. Los Web Host son compañías que proporcionan espacio
de un servidor a sus clientes.
• Servicios pagados
Este tipo de obtención, por lo general viene dado por el contrato de un proveedor
de internet, el cual junto con dar conexión, entre la posibilidad de
almacenamiento mediante disco virtual o espacio web o combinación de ambos.
Otro medio de obtención es contratando algún servicio de una empresa no

dependiente de la conexión a internet, las cuales ofrecen según las capacidades
de sus servidores o de su espacio. Casi siempre a la par, entregan servicios
añadidos, como la ejecución de tareas automáticas o cuentas de correo
electrónico gratuitas.
Normalmente las transacciones son electrónicas, por tarjeta de crédito 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 páginas
de bajos recursos de mantención o aquellas que los dueños 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 página se llene de publicidad en
algún punto.
Otra limitación de estas ofertas es que tiene un espacio limitado y no se puede

usar como almacén de datos, ni pueden alojar páginas subversivas o de
contenido adulto o no permitido.
De todas maneras, existe una amplia oferta de alojamientos gratuitos con

características muy diferentes y que pueden satisfacer las necesidades de
programadores que desean un lugar donde hacer pruebas o que mantienen una
web con un número no muy elevado de visitas.
De acuerdo a la plataforma del servidor web, podríamos decir que se tienen:
Hosting Linux: manejan páginas PHP y bases de datos MySQL/Postgree. Por

lo general son más económicas.
Hosting Windows: páginas ASP, ASP.NET y bases de datos Access y SQL

Server.
2. Dominio
Un dominio de Internet es una red de identificación asociada a un grupo de dispositivos
o equipos conectados a la red internet.
El propósito 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
términos memorizables y fáciles de encontrar. Esta abstracción hace posible que
cualquier servicio (de red) pueda moverse de un lugar geográfico a otro en la red
internet, aun cuando el cambio implique que tendrá una dirección IP diferente.
Sin la ayuda del sistema de nombres de dominio, los usuarios de internet tendrían que
acceder a cada servicio web utilizando la dirección IP del nodo (Ej. Sería 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 España.
.eu : para servicios de Europa.
.mx : para servicios de México.
.pe : para páginas de Perú
.com : comerciales
.org : organizaciones
.net : redes o grupos de usuarios.
Ventajas:
• Su dominio actúa como Vitrina y es la dirección 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

información sobre sus productos y servicios las 24 horas del día.
• Da prestigio a su empresa frente a los competidores que todavía no gozan de

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

y grandes empresas.
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 ningún tipo de contacto comercial con el servicio que
será descrito a continuación, su utilización será solamente con fines didácticos.
Para este ejemplo nosotros utilizaremos el servicio de MiArroba.
Procedimiento .
• Registro de la Cuenta.
- Ingresar a http://miarroba.com
- Ingresar al enlace para crear un nuevo usuario.
- Rellenar los datos del formulario de registro.
xxxxxxxxx
xxxxxxxxx
- Ingresar a la cuenta de correo con la que se registro.
xxxxxxxxx
xxxxxxxxx
miclave
6666
- Introducir los datos solicitados y el código de activación en la página de
arroba.com
cyberfox2010
6666
- Se pedirá que ingrese los datos de acceso.
- Observar que ya está conectado y puede utilizar los servicios brindados por
arroba.com, entre ellos el de Espacio web.
• Configurar la creación del Espacio Web
- Activar el enlace Espacio Web, luego Nuevo espacio.
- Llenar el formulario en donde detalle la información del sitio web: Nombre del Sitio
Web (1), Título (2), Descripción del Sitio (3), Categoría (4), Zona Horaria (5),
contraseña (6), Aceptar las condiciones de uso (7) y verificar el código de
seguridad (8).
1
2
4
5
6
7
8
- Luego, se debe mostrar una página confirmando la creación del espacio web.
Ingresar al enlace mostrado.
1234567
1234567
- A continuación podrá observar los servicios ofrecidos, active INFORMACION y
tome nota de los datos del cliente FTP.
- Activar el uso de PHP y la creación de bases de datos MySQL.
- En MySQL podrá observar los datos de configuración de la base de datos.
- De clic en Desconectar para cerrar su sesión.
• Publicación.
- Copiar la carpeta SISECURSOS 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 página (ejm: index.html), varios de ellos o
todo el sitio completo, y luego hacer un upload (Colocar) hacia el servidor remoto.
- También puede activar Ver sitios locales y remotos y se muestra una ventana de
donde podrá cargar o descargar los archivos.
Contenido
- Introducción a PHP.
- Instalación y Configuración del Servidor Apache.
- Variables y Operadores: Aritméticos, de Comparación y Lógicos.
- Estructuras de Control en PHP.
- Proceso de formularios: Envío y Recepción.
- Métodos GET y POST.
- Formularios de Envío de Correo Electrónico.
INTRODUCCIÓN A PHP
PHP son las siglas de Hypertext PreProcessor, es un lenguaje interprete de alto nivel que se
inserta en páginas 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 más simples como procesar
suscripciones de visitantes a una base de datos, generar contenidos dinámicos, tiendas
electrónicas o crear toda una solución integral intranet de negocios corporativa.
Quizá la característica más 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 páginas 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).
Podríamos bajar de Internet cada programa para su instalación y configuración manual, o en
todo caso podemos usar un paquete instalador como AppServ que permite instalar y configurar
todo automáticamente.
INSTALACIÓN Y CONFIGURACIÓN DEL

SERVIDOR APACHE
1. Instalación del AppServ 2.5.10
- Ejecutar el instalador del AppServ.
- Seguir el procedimiento de instalación.
- Definir:
Server Name: localhost.com
Administrator email: admin@localhost.com
- Definir una contraseña para el Administrador de MySQL.
- Completar el proceso de instalación.
- Abrir el navegador y cargar la página de inicio.
2. Configuración de un Sitio Web Dinámico

- Realizar la configuración básica estableciendo el nombre del sitio (1) y la URL del
sitio: http://localhost/nombre_carpeta_web/ (2).
- Definir que se utilizará tecnología de servidor (1) de tipo PHP MySQL (2).
- Establecer que la edición y comprobación 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 Dinámico. Pulsar CTRL+N para crear una nueva
página 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 escribiéndolas
manualmente en el editor de código.
- Observar que el código 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 símbolo $.
Los Operadores Aritméticos que usa son similares a los usados en el lenguaje JAVA.

Suma + 5+2
Resta - 6–3
Multiplicación * 8*3
División / 6/2
Módulo o Residuo % 7%2
Incremento ++ 2++
Decremento -- 3--
Al igual que los Operadores de Comparación:

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 Lógicos:

Y Lógico && (5 > 2) && (4==2)
O Lógico || (3 != 2) || (2 > 2)
Negación ! ! (3 == 2)
Ejemplo. .
- Crear una página PHP en blanco, y guardar con el nombre de ejemplo03.php, con
el siguiente diseño:
- 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 añadir 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 página

procesos.php, y en el método seleccionar POST.
- Crear una página PHP en blanco, y guardar con el nombre de procesos.php.
- Observar el uso de las variables y operadores. Retornar a la página ejercicio03.php
y previsualizar en el navegador.
- Para completar el diseño anterior, agregar una función Javascript al cuadro de lista
para que al seleccionar un artículo se cargue la imagen correspondiente.
- Como se observa, el evento a usar sería onchange, y envía el valor del índice
correspondiente al elemento seleccionado a la función mostrar, declarada en el
encabezado.
ESTRUCTURAS DE CONTROL EN PHP
Para alguien con conocimientos de Programación en JAVA, encontrará que son similares a las
usadas por PHP, como:
1. Estructuras de Decisión
if (Expr.lógica){
….bloque de acciones verdaderas;
}else{
….bloque de acciones falsas;
}
2. Estructuras Selectivas Múltiples

switch(variable){
case “Valor1”:
break;
case “Valor2”:
break;
default:
…bloque de acciones opcionales;
}
3. Estructuras Repetitivas
for(inicialización; condición; incrementos){
}
while(Expr.lógica){
}
do {
} while(Expr. Lógica)
Ejercicio .
- Crear una página PHP en blanco, y guardar con el nombre de ejemplo04.php, con
el siguiente diseño:
- 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 botón procesar es un botón de acción ninguno, que debe enviar los datos a una
página 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 botón Procesar a la
función validar.
- La función validar:
- Crearemos una nueva página PHP de nombre resumen.php, con el siguiente
contenido:
MÉTODOS GET / POST

La diferencia entre el método POST y GET radica en la confidencialidad de los valores enviados
desde el formulario, los que son mostrados en la URL a través del método GET pero son
ocultados usando POST.
Ejercicio .
- Regrese al diseño de la página ejercicio03.php y cambie el método de POST por

GET.
GET
- Observe que los datos del formulario son visualizados en la barra de dirección, lo
cual en el caso de ser passwords, sería contraproducente.
Contenido
- Gestionar Bases de datos con MySQL

.1. Creación de Bases de Datos y Tablas.
.2. Exportar e Importar scripts.
- Construcción de aplicaciones PHP usando Dreamweaver CS3
.1. Concepto de Páginas Dinámicas
.2. Crear una conexión a la Base de Datos.
.3. Juego de Registros.
.4. Mostrar datos dinámicos.
.5. Repeticiones.
.6. Filtrado de Juego de Registros.
GESTIÓN DE BASES DE DATOS MySQL

MySQL es un sistema de administración de bases de datos relacionales que proporciona a los
usuarios una potente solución de bases de datos SQL (Structured Query Language). Es rápida,
robusta y fácil 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 están formados
por campos de distintos tipos y dentro de los campos se almacenan datos que pueden añadirse,
modificarse, consultarse, actualizarse y borrarse, además de ordenarse de distintas formas.
CAMPOS
(columnas)
REGISTROS
(filas)
1. Creación de Bases de Datos y Tablas.
- Abrir el navegador de Internet e ingresar a la URL: http:// localhost, luego ir al

vínculo phpMyAdmin Database Manager.
- Ingrese los datos Usuario: root y Contraseña: 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 código 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 serán exportadas en el

script (1), activar las opciones de los INSERTS (2) y Enviar (3) para generar un
archivo.
- Guárdelo en alguna ubicación, 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).
CONSTRUCCIÓN DE APLICACIONES
PHP USANDO DREAMWEAVER CS3
1. Concepto de Páginas Dinámicas
Las páginas dinámicas se almacenan en el servidor y cuando son requeridas se ejecutan

y devuelven una salida de código HTML al cliente que lo visualizará en su navegador.
Mientras el archivo PHP se ejecuta en el servidor, puede crear una conexión a una base
de datos y extraer o guardar información en ella.
Ahora que ya tenemos un servidor de pruebas donde pueda ejecutarse el código que
introduzcamos en nuestras páginas y permita la creación de bases de datos para
almacenar información pasaremos a crear nuestras propias páginas dinámicas de acceso
a datos.
2. Crear una conexión a la Base de Datos.

Ahora que ya está configurado el servidor de pruebas en donde pueda ejecutarse el
código que introduzcamos en nuestras páginas y permita la creación de bases de datos
para almacenar información pasaremos a crear nuestras propias páginas dinámicas de
acceso a datos.
- Crear una nueva página 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 conexión y los datos de configuración de la base de datos.
- En Seleccionar podrá elegir la base de datos CINEPLANET.
- Se puede observar la estructura de la conexión.
3. Juego de Registros.
Una vez creada la conexión podremos insertar en cualquier página información
almacenada en la base de datos, sólo 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 conexión 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 página 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 dinámicos.
Una vez creado el Juego de Registros, procedemos a mostrar los datos en la página.
- Abrir la página lista_generos.php e ir a la barra Insertar > Datos > Texto

dinámico.
- Se mostrará el campo.
5. Repeticiones.
Al mostrarse los resultados en el navegador, solo se muestra un solo dato. El siguiente
paso sería el de repetirlo para observar todos los datos.
- Seleccionar la zona que desea repetir, y luego ir a la barra Insertar > Datos >
Repetir región.
- En la ventana siguiente, puede establecer los valores la repetición de los datos.
- Se debe mostrar algo similar a la siguiente imagen.
- Lo anterior también pudo haber sido creado si hubiéramos usado una Tabla
Dinámica. Abrir la página lista_actores.php, luego ir a la Barra Insertar > Datos >
Tabla dinámica.
- Aplicándole 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, parámetros de URL, variables de
sesión, 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 imágenes

hacia la carpeta. Definir el nombre de la página como index.
- Crear la conexión 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 instrucción SQL es una consulta que permite mostrar el ISBN, Titulo y Portada de
la tabla LIBROS, que cumplan con la condición de que el COD de la tabla
novedades sea igual al del ISBN de la tabla Libros.
- Insertar una división, 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 código de la imagen insertando el campo Portada.
- Ahora la información del archivo gráfico se obtiene del nombre almacenado en la

tabla. Acabamos de crear una Imagen dinámica.
- Seleccionar la división (lo puede hacer desde el selector de etiquetas) y aplicar

repetir la región para rsNovedades cada 3 registros.
- Al Previsualizar en el navegador se deberá mostrar:
- En la categoría que se muestra a la izquierda, estableceremos un vínculo hacia la
página listado.php, y enviará un parámetro 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 página

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
parámetro que será enviado a través de la URL, de nombre categoría.
Contenido
- Manejo avanzado de datos

.1. Paginación de registros.
.2. Asistente para la inserción, edición y borrado de registros.
.3. Restringir accesos.
MANEJADO AVANZADO DE DATOS

Adobe Dreamweaver nos permite paginar los registros leídos del juego de registros, permitiendo
una navegación ideal, y herramientas que permiten crear una zona de acceso que contenga
páginas privadas solamente manejadas por aquellos usuarios que se hallan identificado
previamente, de tal manera que nos permita diseñar páginas de administración de datos
(insertar, modificar y eliminar).
1. Paginación de registros.
- Abrir la página listado.php. Al establecer el comportamiento Repetir región, se
había configurado para que se muestre en bloques de 3 registros. Para habilitar la
navegación por los otros registros usaremos los contadores de páginas.
- Insertar una división con un estilo definido en Fuente: Verdana, Tamaño: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 navegación de juego de registros.
rsListado
- Quedaría algo como esto.
2. Uso de los Asistentes para insertar, editar y eliminar registros.

- Abrir la página listado.php y hacer ciertas modificaciones en el diseño.
Zona Central
- Guardar con el nombre de mant_categorias.php. En la Zona Central insertar dos
divisiones.
3
2
En la primera división (1) escribir el texto MANTENIMIENTO: CATEGORIAS.
En la segunda división (2) insertaremos los siguientes elementos:
(3) Un formulario que contenga un botón de tipo enviar con el valor Agregar
categoría. Definir en las propiedades Acción: mant_categorias_nuevo.php
y Método: Post.
(4) Una tabla de 4 columnas y 2 filas. Crear un Juego de Registros para

mostrar todos los datos de la tabla Categorías, luego insertar los campos a
las celdas mostradas. Insertar las imágenes en forma de lápiz (Alt:
Modificar) y en forma de aspa (Alt: Eliminar). Seleccionar la segunda fila y
adicionar el comportamiento Repetir región.
- Al Previsualizar se debe observar.
- Establecer los vínculos en las imágenes.
mant_categorias_editar.php?CategoriaID=<?php echo $row_rscategorias['CategoriaID']; ?>
mant_categorias_borrar.php?CategoriaID=<?php echo $row_rscategorias['CategoriaID']; ?>
- Diseñar la página mant_categorias_nuevo.php, a partir de la página anterior, dejar

la conexión creada. Borrar el contenido de la segunda división, y ubicar el cursor en
esa zona, luego ir a la Barra Insertar > Datos > Asistente de formulario de
inserción de registros
- Añadir un botón con las propiedades Acción: Ninguno, y Valor: Cancelar. En la

vista código añadir una rutina JavaScript que permita volver a la página anterior.
<input type=”button” name=”button” value=”Cancelar” onclick=history.back();” />
- Se crea un formulario listo para agregar nuevos datos a la tabla Categorías.
- Diseñar la página mant_categorias_editar.php, a partir de la página anterior, dejar
la conexión creada. Borrar el contenido de la segunda división, y ubicar el cursor en
esa zona, luego ir a la Barra Insertar > Datos > Asistente de formulario de
actualización de registros
- Se crea un formulario listo para modificar el dato seleccionado en la página

mant_categorias.php.
- Crear una nueva página PHP de nombre mant_categorias_borrar.php. Crear la
conexión a la base de datos, y luego ir a la Barra Insertar > Datos > Eliminar
registro.
- Para poder probar esta acción, se aconseja que primero agregue algunos datos
adicionales, y luego los elimine.
- Para mejorar la apariencia de esta acción, vamos a insertar una rutina JavaScript en
la imagen Eliminar para que muestre un mensaje de confirmación.
<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 páginas, primero diseñaremos una página de
error, llamada error.php.
- Otra página 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 erróneos, y datos correctos.
- El siguiente paso de seguridad, es evitar que se ingrese a una página restringida, si

esta es llamada directamente desde la barra de dirección del navegador. Para evitar
esto, primero abrir la página a restringir (mant_categorias.php), luego ir a la Barra
Insertar > Datos > Restringir acceso a página
- Puede repetir este procedimiento en todas las páginas que para ser mostradas
deban ingresar con un nombre de usuario y password válidos.
- Para terminar, una vez ingresada a una página segura, esta debe mostrar un enlace
para cerrar la sesión actual. Abra la página mant_categorias.php, e insertar un
texto Cerrar sesión.
- Seleccionar el texto, y luego ir a la Barra Insertar > Datos > Desconectar usuario.
- Previsualizar en el navegador y comprobar el funcionamiento.
Bibliografía
1. ALBAN CAMPOS, Victor. COREL DRAW X3. Editorial MEGABYTE.

286pp.
2. SUAREZ CORDOVA, José. ADOBE FIREWORKS CS3. Editorial

Grapperú. 275 pp.
3. EL GRAN LIBRO DE DREAMWEAVER CS3. Editorial MEDIAACTIVE.

2008
4. DREAMWEAVER CS3. Valdes-Miranda, Claudia. Editorial ANAYA

MULTIMEDIA. 2008.

Manual Aplicativos Web I - v0510 PDF

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual Aplicativos Web I - v0510 PDF

Загружено:

Авторское право:

Доступные форматы

Índice

Esta guía didáctica es un material de ayuda institucional, perteneciente a las

La Organización SISE, líder en la enseñanza tecnológica a nivel superior,

Esta guía se divide en 2 módulos y cada una de ellas en 9 semanas. La primera

INTRODUCCIÓN A COREL DRAW X3

Qué es un gráfico vectorial?

Una vez cargado el programa, se muestra una ventana que permite:

- Crear un NUEVO gráfico.

- Abrir alguno de los archivos usados

- Abrir un archivo desde cualquier

- Crear uno nuevo usando una plantilla.

- Revisar el CORELTUTOR, que es un

- Leer algunas novedades del programa.

Tamaño del Ancho y alto Orientación Vertical y Establecer tamaño y orientación

Cómo puedo personalizar mi Entorno de Trabajo ?

- Al trazar un rectángulo cualquiera sobre el documento podrá observar el puntero activo.

Observar la forma del puntero. Ahora activar la

Mover el centro Inclinar

- Trazar un rectángulo pulsando la tecla CTRL => se dibuja un CUADRADO.

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

Contorno Azul Contorno Rojo

Clic sostenido al color

Estrella Papel Gráfico

- Trazar un polígono, luego cambiar el número de puntas o lados del polígono.

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

Trazar una estrella de 5

Trazar una estrella

c. Herramienta Papel Gráfico

4. Herramienta Zoom y Mano

Zoom (pulsar Z) Mano (pulsar H)

- 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 cómo se aleja.

- Pulsar F4, para observar todo el área de

- Pulsar SHIFT + F4, para observar sólo las

- Pulsar F9, para hacer una previsualización

Formas de Flecha Formas de Orla

Formas de Diagrama de Flujo

- Formas Básicas - 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 más rápida usar los siguientes atajos:

SHIFT + AVPAG Mover hacia atrás de todo (hacia atrás de la capa).

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

CTRL + AVPAG Mover hacia atrás de un objeto (retroceder una).

Pulsar T (Alineación Superior) Pulsar B (Alineación Inferior)

Pulsar L (Alineación Izquierda) Pulsar R (Alineación Derecha)

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

- Dibujar dos círculos de diámetro 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 rectángulo y pulse CTRL + D varias veces y RECORTAR.

- Seleccionar los rectángulos y eliminarlos. La figura debe quedar así:

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

- La Herramienta Bézier y la herramienta Pluma permiten crear líneas curvas.

- La Herramienta Forma o activar pulsando la tecla F10 permite seleccionar