Manual v015

Alcántara 1
Índice
1. Conceptos Básicos ...................................................................................................... 1
1.1 ¿Qué es una página web? ................................................................................ 1
1.2 Lenguajes.......................................................................................................... 2
1.2.1 Lenguaje HTML ...................................................................................... 2
1.2.2 Lenguaje JavaScript ............................................................................... 3
1.3 Dominios ........................................................................................................... 3
1.4 ¿Cómo publicar un sitio web? ........................................................................... 4
1.5 Acceso a la página web .................................................................................... 4
1.6 Cómo planificar el sitio web............................................................................... 5
1.7 Reglas básicas en el diseño.............................................................................. 9
1.7.1 Lo visual en el proceso creativo ............................................................. 9
1.7.2 Estilo visual........................................................................................... 10
1.8 Formatos gráficos ........................................................................................... 10
1.8.1 ¿Qué son los formatos gráficos?.......................................................... 10
1.8.2 Formatos vectoriales ............................................................................ 11
1.8.3 Formatos bitmap................................................................................... 11
1.8.4 Los formatos gráficos en Web: GIF y JPG ........................................... 11
1.8.5 Velocidad.............................................................................................. 12
1.9 El texto en las páginas .................................................................................... 12
1.10 Tablas ........................................................................................................... 13
2. Etiquetas HTML ......................................................................................................... 14

2.1 Introducción..................................................................................................... 14
2.2 HTML (Hypertext Markup Lenguaje). .............................................................. 15
2.2.1 Editar – Guardar y Visualizar................................................................ 15
2.2.2 Estructura Básica HTML....................................................................... 15
2.3 Pasos a seguir durante el trabajo en Notepad. ............................................... 16
2.4 Ejemplos del Código HTML............................................................................. 17
2.4.1 Fondo (color o imagen) de nuestra página. .......................................... 17
Alcántara 2
2.4.2 Dando Formato al Texto del Documento. ............................................. 19

2.4.3 Listas. ................................................................................................... 21
2.4.3.1 Lista numerada. ........................................................................... 21
2.4.3.2 Lista con viñeta. ........................................................................... 21
2.4.3.3 Lista de definición. ....................................................................... 22
2.5 Vínculos de Hypertexto. .................................................................................. 23
2.5.1 Vínculos externos hacia páginas lejanas.............................................. 23
2.5.2 Vínculos externos hacia páginas cercanas........................................... 24
2.5.3 Vínculos internos: anclas...................................................................... 24
2.5.4 Vínculos de correo electrónico ............................................................. 24
2.6 Agregando Imágenes a su Página. ................................................................. 28
2.7 Uso de Tablas. ................................................................................................ 29
2.7.1 Estructura básica de las tablas............................................................. 30
3. Dreamweaver ............................................................................................................ 33
3.1 Requisitos del sistema. ................................................................................... 33
3.2 Aspectos básicos de Dreamweaver ................................................................ 33
3.2.1 Área de trabajo. .................................................................................... 33
3.2.2 Diferentes vistas de Dreamweaver. ...................................................... 34
3.2.2.1 Trabajar con la vista de Diseño.................................................... 35
3.2.3 Ventanas de Dreamweaver. ................................................................. 35
3.2.3.1 Barra de herramientas.................................................................. 35
3.2.3.2 Panel de Objetos.......................................................................... 36
3.2.3.3 Inspector de Propiedades ............................................................ 38
3.2.4 Configurar el sitio.................................................................................. 39
3.2.4.1 Planificación y diseño de sitios..................................................... 40
3.2.4.2 Configurar sitios con Dreamweaver ............................................. 40
3.2.4.3 La ventana Sitio ........................................................................... 44
3.3 Trabajando con Dreamweaver. ....................................................................... 45
3.4 Insertar Imagen. .............................................................................................. 47
3.5 Insertar Tabla .................................................................................................. 49
Alcántara 3
3.6 Importar datos desde Excel............................................................................. 51

3.7 Vínculos .......................................................................................................... 53
3.7.1 Anclas................................................................................................... 54
3.8 Marcos ............................................................................................................ 56
3.8.1 Crear Marcos........................................................................................ 58
3.9 Vistas de Disposición. ..................................................................................... 61
3.10 Añadir sonido a una página........................................................................... 64
3.11 Formularios. .................................................................................................. 66
3.11.1 Objetos de formulario. ........................................................................ 66
4. Fireworks ................................................................................................................... 76
4.1 ¿Qué es la creatividad?. ................................................................................. 76
4.2 Aspectos básicos de Fireworks....................................................................... 76
4.2.1 Área de trabajo. .................................................................................... 76
4.2.2 Herramientas. ....................................................................................... 78
4.2.3 Herramientas de trazado. ..................................................................... 80
4.3 Creación de texto ............................................................................................ 80
4.3.1 Asociación de texto a un trazado.......................................................... 81
4.4 Uso de la herramienta pincel........................................................................... 82
4.4.1 Edición y remodelado de trazados editando los puntos. ...................... 82
4.5 Transformación y distorsión de objetos........................................................... 83
4.6 Insertar imágenes ........................................................................................... 84
4.7 Dibujar rectángulos y círculos ......................................................................... 84
4.8 Efectos y cambio de rellenos .......................................................................... 85
4.8.1 Aplicación de bordes biselados. ........................................................... 85
4.8.2 Aplicación de efectos de relieve. .......................................................... 85
4.8.3 Aplicación de sombras y luces. ............................................................ 86
4.8.4 Efecto Eye Candy................................................................................. 87
4.9 Enmascaramiento de imágenes...................................................................... 89
4.10 Creación de rollovers .................................................................................... 90
4.10.1 Rollover Simple. ................................................................................. 91
Alcántara 4
4.10.2 Uso de comportamientos arrastrar y colocar para crear efectos de

imagen de intercambio. ................................................................................................. 92
4.11 Creación de animaciones.............................................................................. 95
4.11.1 Acerca de las animaciones................................................................. 96
4.11.2 Creación de símbolos de animación................................................... 96
4.11.3 Edición de trazados de movimiento de símbolos................................ 97
4.11.4 Trabajo con fotogramas...................................................................... 98
4.12 Exportación de la animación ......................................................................... 99
4.13 Presentación preliminar de ajustes de optimización y comportamientos ..... 99
4.14 Exportación ................................................................................................. 101
5. Relación Dreamweaver y Fireworks ........................................................................ 103
Bibliografía................................................................................................................... 105
Alcántara 1
Drawing by Feza Balci en: Usability Methods & Tools http://research.cs.vt.edu/usability/index.html
Unidad 1.- Conceptos Básicos
1.1 ¿Qué es una página web?
Podemos preguntarnos ¿qué es una página web?, para lo cual habrían respuestas
desde dos perspectivas; una para el “navegante” y otra para el diseñador de páginas
web.
• Para el “navegante o internauta” una página web es una pantalla en su

monitor que le muestra la información que va buscando y enlaces a otros
sitios relacionados.
• Para el diseñador una página web, es un documento que desarrolla para

mostrar información en la pantalla de un monitor, que contiene además de la
información una serie de instrucciones para indicar cómo se ha de mostrar
esa información. Estas instrucciones se escriben siguiendo un lenguaje
llamado HTML (Hypertext Markup Languaje).
El diseñador define la página web como algo más completo y técnico que el simple
“navegante”. La página web se concreta en un documento con un nombre terminado
Alcántara 2
con la extensión .htm o .html. Una serie de páginas web interconectas e

interrelacionadas de alguna forma (el mismo tema, el mismo objetivo, etc.) forman
un sitio web, que habitualmente está almacenado en un servidor.
Requisitos para realizar un sitio web
Los requisitos para realizar un sitio web son mínimos: una computadora, un
navegador y un editor de texto simple es suficiente. El editor de páginas web utiliza
un editor tipo texto, o uno gráfico. Al utilizar un editor de texto hay que contemplar la
idea de conocer el lenguaje HTML, para el desarrollo de este curso se utilizarán dos
paquetes de la familia Macromedia, como son DreamWeaver y Fireworks. En cuanto
al navegador podrás usar el que viene en los equipos con Windows, que es el
Internet Explorer, o en su caso el Netscape, de esa manera podrás comprobar que
todo lo que hagas funciona en ambos exploradores.
1.2 Lenguajes
Para el diseño de una página web, básicamente se utiliza el lenguaje HTML así
como Java Script si deseamos realizaron algunos efectos en la misma. Por otro lado
si se desea que la página sea dinámica e interactúe como sistema de ventas,
pedidos, etc., entonces tendríamos que acudir a lenguajes como Perl, PHP, ASP,
entre otros, así como manejadores de bases de datos como SQL, MySQL, Oracle,
etc. Lo anterior ya sería para desarrolladores con capacidad de análisis de sistemas
y diseño de bases de datos. En este curso sólo mencionaremos HTML y un poco de
JavaScript.
1.2.1 Lenguaje HTML
El lenguaje HTML es la base estructural en la que están diseñadas las páginas de la

World Wide Web (www). Es importante saber que el HTML es un lenguaje que se
escribe en paquetes de modo texto, por lo cual, también se pueden construir las
Web en simples editores de texto, por ejemplo, en el mismo notepad que incorpora
Windows.
Hasta hace muy poco tiempo el diseño de páginas Web exigía el conocimiento de
los códigos propios del lenguaje HTML, DHTML, y últimamente XML que aunque no
son excesivamente complejos, resultaban confusos y de difícil manejo. Sin embargo,
actualmente la utilización de este lenguaje de programación está al alcance de
cualquier usuario. Existen en el mercado distintos programas creados
específicamente para facilitar el diseño de websites. Son los llamados editores
WYSIWYG ("What You See Is What You Get")
La forma de crear páginas web con estos programas es de forma visual, los cambios
que se realicen se ven sobre la marcha, prácticamente igual que lo verían los
usuarios cuando visiten nuestra página. Así, una tabla de 3 celdas por 2 filas la
vemos visualmente de esa forma, y no como un código de programación HTML.
Alcántara 3
1.2.2 El lenguaje JavaScript
JavaScript es un lenguaje de scripts o líneas de código que se puede agregar al

código html, esto para dar algo de efectos a una página web. Originalmente era
denominado LiveScript, y fue desarrollado por Netscape para su navegador
Netscape Navigator 2.0. Fue éste el primer cliente en incorporarlo. Se ejecuta sobre
16 plataformas diferentes, incluyendo los entornos de Microsoft e incluso el MS
Explorer lo incorpora desde su versión 3.0.
JavaScript permite la realización de aplicaciones de propósito general a través de la

www y aunque no está diseñado para el desarrollo de grandes aplicaciones es
suficiente para la implementación de aplicaciones www completas o interfaces www
hacia otras más complejas.
Por ejemplo, una aplicación escrita en JavaScript puede ser incrustada en un

documento HTML proporcionando un mecanismo para la detección y tratamiento de
eventos, como clicks del ratón o validación de entradas realizadas en formularios.
Sin existir comunicación a través de la red una página HTML con JavaScript
incrustado puede interpretar, y alertar al usuario con una ventana de diálogo, de que
las entradas de los formularios no son válidas o que le faltó información en la
captura de datos.
1.3 Dominios
¿Debería tener mi propio dominio?
Tener un sitio web en 'paginas.sitios-gratis.com/mi-empresa/' da una imagen

bastante mala, y el precio de un dominio ya no es excusa para que tengas el tuyo
propio.
Tener un dominio del tipo 'abogados-mexico.com' te da la opción de que desde otras

páginas web te enlacen de la manera:
<A href=http://www.abogados-mexico.com>abogados-mexico.com</A>
Esto te dará la posibilidad de optimizar tu sitio web para las palabras 'abogados
México'.
Además, si quieres aparecer en los resultados de Google referentes a un

determinado país, deberás tener un dominio del tipo -por ejemplo-
'midominio.com.ar' (si quieres aparecer en los resultados de Argentina') o
'midominio.com.mx' (en los de México). Google también te listará dentro de estos
resultados si el servidor donde hospedas tus páginas web está físicamente en estos
países.
Alcántara 4
1.4 ¿Cómo publicar un sitio Web?
Para enviar archivos hacia un servidor, es recomendable usar un programa cliente

FTP (File Transfer Protocol), tipo leechFTP, CuteFTP o WS_FTP, Filezilla. Dentro de
DreamWeaver, también se podrá definir un sitio remoto vía FTP para la publicación
de archivos.
Con el software FTP será posible la actualización y mantenimiento de la Web.

Podrá enviar todos los archivos utilizados en la web a su espacio reservado para ello
en el servidor, eliminar o renombrar archivos una vez enviados al servidor, crear
subdirectorios, dar determinados permisos a los archivos, etc.
Proceso de grabar información por parte del webmaster y visualización por los diferentes visitantes al sitio.
1.5 Acceso a la página web

Para que los usuarios tengan acceso a páginas HTML, se requiere contar con un
servidor de páginas web, o “web server”. El servidor de páginas web se encarga de
administrar los sitios que estén a su cargo, y de controlar el acceso a los mismos.
El servidor de páginas web se encarga de “servir” las páginas HTML mediante el

protocolo http (Hyper Text Transfer Protocol). Mediante este protocolo de
comunicación, se le especifica al servidor web la página html que deseamos utilizar.
Esto se hace indicando el directorio donde está alojada la página y el nombre de la
misma.
Alcántara 5
Ejemplo:
http://www.sctnl.net/obra07/menu_fed000.htm
Protocolo Servidor Ruta Archivo
Ejemplo de una trayectoria para acceder a un archivo en especial o localización del

mismo.
Proceso de solicitud de una página y su posterior visualización en el monitor.
1.6 Cómo planificar el sitio web
El primer paso es: “Apagar la Computadora”
Sí: para crear un sitio en internet el primer paso es apagar el equipo, tomar un papel
y lápiz y hacer un esquema que responda a las siguientes preguntas:
• ¿Qué quiero publicar?

• ¿A quién va dirigida mi página?
• ¿Con qué material cuento?
Antes de empezar a editar una página web debemos dedicar un tiempo a planificar
nuestro trabajo para asegurarnos de qué vamos a incluir en la web, de dónde lo
Alcántara 6
vamos a obtener y qué aspecto externo le vamos a dar. Un minucioso trabajo de

planificación reducirá los errores que se producen cuando nos ponemos a editar una
página. Si queremos evitar borrar y repetir las cosas una y otra vez, convendrá que
sigamos los siguientes pasos:
A. Definir la audiencia destino: al crear una web desearemos que comunique

adecuadamente el mensaje y contenidos que quiere transmitir: publicar los
resultados de una investigación, describir una situación o la inclusión de contenidos
diversos.
En función de la audiencia destino el diseño de la web será diferente. Por ejemplo, si

queremos publicar un artículo, los visitantes visitarán la página para leerlo, por lo
que todo elemento que adorne excesivamente la página o contenga gráficos muy
pesados en tamaño (kbps o mbps) hará lenta la página por lo que nuestros visitantes
se cansarán de esperar a que ésta se despliegue completamente y por consiguiente
abandonarán nuestro sitio.
En una web docente la audiencia destino serán alumnos y profesores de una

asignatura, curso o tipo de estudios. El material incluido en la web debe ir dirigido a
dicha audiencia para un mejor aprovechamiento.
B. Establecer objetivos: debemos pensar cuáles son los objetivos de nuestro sitio
web: ¿divulgar información?, ¿promocionar una asociación? ¿comercio electrónico?,
¿educar?, ¿entretenimiento?. Debemos definir los principales objetivos que
queremos alcanzar, que junto con la audiencia destino nos permitirán definir los
contenidos que debemos incluir en el sitio web.
Los objetivos en una web docente pueden ser muy diversos y dependen de si lo que
queremos es una web para educación a distancia o una web que sirva de apoyo y
complemente a la educación presencial. En el caso de la educación a distancia
(teleformación) los objetivos serán que el alumno supere el curso o asignatura a
través de los contenidos y procedimientos que se establecen en la web. En estos
casos será fundamental el apoyo de una guía de estudio y la elaboración de
materiales didácticos de calidad.
En el caso de que la web docente nos sirva de apoyo para la clase habitual, se
deben incluir contenidos que complementen y amplíen lo visto en clase, con
ejercicios, pruebas de auto-evaluación, tutoría on-line y con referencias a webs de
donde extraer la información para realizar cualquier actividad relacionada con la
asignatura.
C. Organización: una vez definidos los objetivos debemos recopilar todo el material
gráfico y escrito que incluiremos en la web. Seguramente más adelante nos
encontraremos que es necesario crear nuevos contenidos, pero si estamos
organizados bastará simplemente con incluirlos donde corresponda. Una vez
definidos claramente los objetivos y disponer del material necesario es hora de
organizarlo. Cuánto más grande sea el sitio web, más organización necesitaremos.
En una web docente incluiremos materiales escritos (apuntes, exámenes,

documentación, etc.) que debemos recopilar para organizarlos. Es conveniente que
Alcántara 7
el material adopte un formato lo más parecido para que se identifique con la web.
Igualmente, debemos decidir si el material será visible on-line o habrá que
descargarlo previamente (se usan normalmente los formatos ppt, doc, xls, pdf, zip,
etc.).
Ejemplo de un mapa de sitio para una página de docentes.

Imagen de: http://usuarios.lycos.es/fisikito/mapa%20del%20sitio.htm
D. Crear la estructura de directorios: una vez que hemos organizado nuestras ideas
y recopilado el material necesario para la web, es el momento de organizar los
contenidos en un sistema de archivos y directorios de forma ordenada. A este
proceso se le llama mapeado del sitio web. Este trabajo es una parte esencial en la
planificación del sitio web, ya que nos ayudará a especificar las trayectorias
correctas de los enlaces, imágenes y documentos que vayamos a incluir en la web.
Para ayudarnos a visualizar la estructura de directorios es recomendable dibujar una

especie de organigrama en el que vayamos colocando los directorios en función de
su importancia desde un nivel superior a otros inferiores.
En una web docente se suelen emplear directorios como programación de la

asignatura, ejercicios, exámenes, material de consulta, etc.
Alcántara 8
Ejemplo de estructurar directorios, subdirectorios y archivos.
E. Crear un guión: es el momento de hacer un boceto de la página principal y de

cada página que esté enlazada a ésta, incluyendo todos los elementos que creamos
necesarios (texto, imágenes, botones, hipervínculos,...) sin preocuparnos demasiado
por los ajustes, es simplemente un boceto. Es importante recordar que los visitantes
de una web no lo van a leer completamente sino que lo que desean es encontrar
rápidamente lo que les interesa, por lo que habrá que establecer una estructura
adecuada de enlaces entre las páginas. El movimiento de un lado a otro del web
debe ser lo más intuitivo posible para facilitar el trabajo del visitante. Un sitio web en
el que sea difícil encontrar aquello que buscamos será abandonado rápidamente.
F. Desarrollo del aspecto externo: el siguiente paso será la representación visual del
sitio web. Es esencial la combinación de color, gráficos, tipos y texto que nos ayuden
a expresar lo que queremos comunicar con estilo e impacto. Los editores de páginas
web incluyen recursos que ayudarán a los no especialistas en diseño a conseguir
una estética adecuada.
Cuestiones a tener en cuenta.- Estos son algunos aspectos que debe seguir para
conseguir un buen desarrollo de su web.
• Espacio y equilibrio: cantidad de espacio que los elementos de la página

ocupan, así como la cantidad de espacio vacío y cómo equilibrar todo esto.
Normalmente a los diseñadores les gusta ver abundante espacio en blanco
entre los elementos, lo cual facilita la legibilidad y no agobia la vista.
• Color: dependiendo del tipo de web incluiremos colores brillantes o suaves.
En el caso de una web docente es preferible colores suaves que faciliten la
navegación y lectura de la documentación.
• Tipo de letra: esta característica añade personalidad al sitio web pero es
preferible no incluir muchos tipos de letra en una página web.
• Formas: en casi todas las páginas webs se emplean rectángulos para colocar
las cabeceras de página o titulares. Pero podemos emplear cualquier otra
forma geométrica que nos ayudará a crear un sitio con personalidad.
Alcántara 9
• Textura o gráficos de fondo: hay que asegurarse de que el texto sea claro y
fácil de leer.
• Consistencia: emplear por todas las partes un mismo esquema de colores
que facilite la navegación.
1.7 Reglas básicas en el diseño
• Colocar un título corto, descriptivo y preciso.

• Tener algo interesante que decir en su Página Principal:
Su página deberá ser informativa para mantener vivo el interés.
• No será otra lista de listas:
Todo el mundo ya conoce las herramientas de búsqueda. Haga que sus
enlaces sean pertinentes al tema que está tratando.
• Recordar que no en todos los Browser o Navegadores aparece igual:
No haga que su página dependa demasiado de ciertos comandos HTML
que pueden no aparecer en todos los Browsers. Algunos Browsers pueden
no aceptar sus gráficas, así que proporcione textos alternativos.
• No usar gráficas de otros autores si no está autorizado:
Hay muchas fuentes de gráficas gratis. También existen graficadores
sencillos con los que usted puede crear sus propias gráficas.
• Reconocer el trabajo de los demás:
Si algún "Web Site" le ayudó de alguna manera a construir su página,
entonces bríndele un enlace.
• Colocar fecha de la última revisión:
Indique cuándo se realizó la última revisión. Esto hará que las personas se
motiven a leer su página.
• Verifique sus enlaces periódicamente:
No deje que expiren sus enlaces durante largos períodos de tiempo.
Revise su validez.
• Sea abierto a comentarios o sugerencias:
Especifique vínculos de correo electrónico o, si es posible, formularios de
realimentación.
1.7.1 Lo Visual en el Proceso Creativo
El proceso de composición es el paso más importante en la resolución del problema

visual. Los resultados de las decisiones compositivas marcan el propósito y el
significado de la declaración visual y tienen fuertes implicaciones sobre lo que recibe
el espectador.
Esta etapa del proceso creativo, es donde el comunicador visual ejerce el control
más fuerte sobre su trabajo y donde tiene la mayor oportunidad de expresar el
estado de ánimo total que se quiere transmita, en este caso la Web.
Alcántara 10
No existen reglas absolutas sino cierto grado de comprensión de lo que ocurrirá en

términos de significado si disponemos las partes de determinadas maneras para
obtener una organización y una orquestación de los medios visuales.
1.7.2 Estilo Visual
El estilo es la síntesis visual de los elementos, las técnicas, la sintaxis, la incitación,

la expresión y la finalidad básica. Resulta complicado y difícil describirlo con
claridad.
En las artes visuales el estilo es la síntesis última de todas las fuerzas y factores, la
unificación, la integración de numerosas decisiones y grados.
En primer lugar está la elección del medio y la influencia de ese medio sobre la
forma y el contenido. En nuestro caso el medio es la Web, es decir, un formato
digital presentado en la pantalla de una computadora, donde el espectador ha de
interactuar en mayor o menor grado de libertad.
Tenemos también el propósito, la razón por la que algo se hace: para la

supervivencia, la comunicación, para la expresión personal.
La elección visual presenta una serie de opciones: la búsqueda de decisiones

compositivas mediante la selección de elementos de carácter elemental, la
manipulación de los elementos a través de técnicas apropiadas....
El resultado final es una expresión individual (o a veces colectiva) dirigida por todos
o la mayor parte de los factores mencionados, pero influida principal y
profundamente por lo que está ocurriendo en el entorno social, físico, político y
psicológico, entorno que es crucial para todo lo que hacemos o expresamos
visualmente.
La política, la economía, el entorno y los esquemas sociales crean juntos una

psicología de grupo. Estas mismas fuerzas, que dan lugar a lenguajes individuales
en el uso verbal, se combinan en el modo visual para crear un estilo común de
expresión.
1.8 Formatos gráficos
1.8.1 ¿Qué son los formatos gráficos?
Básicamente, los formatos gráficos son archivos en los cuales se guarda información
que conforma una imagen. Cada formato es independiente. Las posibilidades que
ofrece cada formato con respecto a la gama de colores, a la compatibilidad, a la
rapidez de carga, etc., merece ser explicada para determinar cuál de ellos es el más
adecuado para la tarea que estamos realizando.
Alcántara 11
Con respecto a la estructura, la mayoría posee un header que indica al programa

que lo solicite las características de la imagen que almacenan; por ejemplo su color,
tipo, resolución, etc. Cada formato tiene una organización propia de su estructura.
Se pueden dividir en dos grandes grupos: los formatos vectoriales y los formatos
bitmap.
1.8.2 Formatos vectoriales
Son más simples que los bitmap. Consisten en una serie de dibujos lineales basados
en una lista de objetos gráficos, por ejemplo: líneas, curvas, triángulos, círculos,
rectángulos, etc. Estos objetos, y muchos más, ubicados estratégicamente en la
pantalla, forman dibujos lineales complejos. En este tipo de formatos las áreas
vacías entre las líneas pueden ser llenadas con colores o con "rellenos", pequeños
diseños que se repiten una y otra vez sin dejar espacios vacíos hasta llenar el área
en cuestión. El tamaño de las imágenes almacenadas en este tipo de formatos
puede ser modificado sin notar pérdida alguna de calidad. Gracias a esta
característica son muy útiles a la hora de imprimir imágenes.
1.8.3 Formatos bitmap
Contienen imágenes basadas en pixels (por ejemplo una imagen cuya resolución es
de 640 x 480 pixels, contiene 640 pixels horizontales y 480 pixels verticales). Las
imágenes generadas por scanner son de tipo bitmap. Cuanto mayor sea la gama de
colores, más realismo se consigue con este tipo de formato. Las imágenes bitmap
poseen un tamaño natural en el cual se imprimirán perfectamente, pero, a diferencia
de las vectoriales, no ofrecen grandes posibilidades con respecto a la variación del
tamaño. Al aumentar el tamaño bruscamente, es fácil notar una gran disminución de
la calidad. Otro punto en contra de los formatos bitmap es la cantidad de memoria y
espacio que ocupan. Debido a esto, la mayoría de ellos utilizan diversos métodos de
compresión de la información que constituye la imagen.
1.8.4 Los formatos gráficos en Web: GIF y JPG
Los dos formatos gráficos más utilizados para la Web son el JPG (JPEG) y el GIF.
El formato gráfico JPG, comprime mucho más las imágenes que el GIF, y permite la
utilización de millones de colores (GIF soporta, como máximo, 256 colores).
Recomendable para grandes gráficos y fotografías, especialmente para aquellos a
los que queremos dotar de mayor calidad.
Generalmente, la herramienta que utilizamos para guardar la imagen como JPG, nos
permitirá elegir el nivel de calidad. Recordemos que cuanto mayor sea la calidad,
más espacio requerirá la imagen, porque estará menos comprimida, y pesará más a
la hora de ser descargada.
Alcántara 12
• Salvo para grandes gráficos o fotografías, emplearemos el formato GIF para

guardar nuestras imágenes. Su versatilidad nos permite crear efectos, como:
• Modificar las imágenes, dotándolas de fondos transparentes

• Crear animaciones, compilando varias imágenes.
• Si utilizamos el GIF entrelazado (interlaced), la imagen aparece poco a poco,
en lugar de hacerlo de golpe. Así, cuando recibimos en el monitor la imagen,
vamos viendo cómo llega, y es menos aburrida la espera.
1.8.5 Velocidad
Podemos crear las páginas más atractivas, con las imágenes más "elaboradas", y
además incluir animaciones, pero si caemos en el error de no controlar su volumen,
los internautas que nos visiten no esperarán a que nuestras maravillas aparezcan en
su monitor.
Por consiguiente, una de nuestras mejores armas para el diseño de páginas Web
puede convertirse en nuestro peor enemigo.
Intentar que las imágenes no alcancen 30 K, será una buena medida para no
disuadir a nuestros visitantes.
1.9 El texto en las páginas

Leer en una pantalla de una computadora no es demasiado cómodo ni
recomendable para nuestros ojos. ¿Entonces si necesitamos poner un texto largo
que hacemos? De entrada procurar repartirlo en páginas con cierta coherencia. El
periódico te servirá de ejemplo, los temas están agrupados por secciones: deportes,
espectáculos, actualidad. En la web las secciones podrían ser páginas o grupos de
páginas. Observa que el texto que estás leyendo está distribuido en diferentes
páginas web. Pero si aún así tienes mucho texto procura distribuirlo con elementos
que rompan la continuidad, elementos que pueden ser simples líneas o pequeños
gráficos que tengan relación con lo escrito. Si aún así queda mucha lectura en las
páginas plantéate poner una versión pdf (para el visor de adobe) o un archivo de
texto descargable por el visitante. Y recuerda: párrafos cortos donde destaque
claramente la idea que quieras transmitir.
Aunque las páginas que viajan por la red son excelentes plataformas multimedia, no
cabe duda que en muchos casos debemos poner textos. Leer en la pantalla de una
computadora causa cierto rechazo, por eso es necesario buscar formas de
distribuirlo por la página de forma que no parezca demasiado compacto.
Alcántara 13
1.10 Tablas
Las tablas son quizás el mejor método que tenemos para ordenar el texto, y los
demás elementos en una página web. Una tabla básicamente es una colección de
celdas organizadas en filas y columnas, pero esta organización tan cuadriculada
puede romperse combinando varias celdas en una sola o dividiendo una celda en
varias filas o columnas. Esto convierte a la tabla en un elemento tremendamente
versátil para repartir texto e imágenes, en la página. En los ejemplos siguientes
tienes algunas tablas modificadas en este sentido, se les han puesto bordes para ver
como se han combinado o dividido las celdas.
Alcántara 14
Unidad 2.- Etiquetas HTML
2.1 Introducción
La información en la Red necesita viajar de una manera rápida y precisa, para lo

cual se creó el protocolo de comunicación HTTP o Hyper Text Transport Protocol, el
cual fue desarrollado en un laboratorio de física de partículas del CERN en Suiza
con el fin de transferir rápidamente a todos los usuarios lo últimos resultados de sus
investigaciones. Inicialmente el WWW (World Wide Web) era poco interactivo,
limitándose a desplegar la información en modo texto. Luego el permanente avance
de tecnológico surgieron los visualizadores gráficos (browsers) y con ellos el HTML
(Hypertext Markup Languaje) lenguaje utilizado para la presentación de la
información en la red.
La finalidad de los browsers, como Netscape o Internet Explorer es interpretar el

código HTML que llega a nuestros computadores por medio del HTTP.
Para Norman (1986), existen actividades cognitivas de un usuario en procesos que

requieran de una relación entre la actividad física y actividad mental. Al respecto se
enumeran las siguientes y se realiza una gráfica del mismo para ver la relación
existente entre estas actividades.
• Establecer un objetivo.
• Formar una intención
• Especificar las secuencias de acciones
• Ejecutar la acción
• Percibir el estado del sistema
• Interpretar el estado
• Evaluar el estado del sistema con respecto a los objetivos e intenciones
Alcántara 15
2.2 HTML (Hypertext Markup Languaje)
El HTML es más una codificación que un lenguaje de programación. Su estructura

básica es tan simple que cualquier persona sin principios en programación puede
aprenderlo con gran facilidad.
Lo sorprendente de este lenguaje es que proporciona al usuario la información en

una manera interactiva, haciendo uso del hypertexto, o texto con enlaces hacia otros
lugares del Web, o hacia inserciones de multimedia (videos, sonidos, gráficos, etc.).
Además es universal y no depende del sistema operativo que se esté utilizando.
Los documentos HTML se escriben en modo ASCII (texto plano), haciendo uso de
cualquier procesador de palabras y en cualquier sistema operativo.
2.2.1 Editar - Guardar y Visualizar
Para editar o crear un documento HTML se puede hacer uso de cualquier

procesador de palabras. Para ello se debe modificar o digitar la estructura completa
del documento y guardarlo como texto simple con extensión HTML.
Ahora para visualizar nuestros cambios o ver como va quedando nuestra página,
antes de cargarla en nuestro servidor, se puede abrir el archivo en cualquier
visualizador, y este lo desplegará tal como se vería la página.
Las opciones de que disponen los browser más comunes, son:
Nestcape:
Menu "File", comando "Open file in a browser" (Ctrl O). Para volver a cargar el
archivo una vez que este ya esté abierto en el browser, se dispone del
comando "Reload" del menú "View".
Internet Explorer:
comando "Abrir" del menú "Archivo". Para volver a cargar se dispone del
comando "Actualizar", del menú "Ver".
2.2.2 Estructura Básica HTML
Para comenzar debemos saber que el HTML utiliza una codificación genérica, la
cual hace uso de “tags” o etiquetas. Mediante estas etiquetas es posible separar el
contenido del documento de su formato.
Los “tags” son comandos que se especifican en el cuerpo del programa, con el fin de
darle las características deseadas a la información.
Toda página Web debe contener la siguiente estructura:

Alcántara 16
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
La etiqueta <HTML> le indica al visualizador que va a comenzar a leer un

documento HTML y se debe colocar siempre al comienzo y al fin del texto.
La etiqueta <HEAD> indica un encabezado, dentro del cual se coloca información

como el título, el cual debe estar contenido entre la etiqueta <TITLE>
Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que realmente

vemos en el Web. Para comenzar a escribir un documento, es importante tener en
cuenta que el lenguaje HTML no distingue más de un espacio entre caracteres y se
olvida de cualquier formato que se le de al texto (negrilla, cursiva, tipo de letra, entre
otras). Recordemos que para esto es que se creó el HTML, toda presentación final
debe ser proporcionada mediante las etiquetas.
Cada etiqueta, con excepción de unas cuantas, le debe indicar al visualizador

cuando finaliza, para lo cual se utiliza </TAG>, donde TAG puede ser cualquier
etiqueta. De esta manera indicamos cuando comienza y termina el encabezado, el
título, el cuerpo y el documento HTML.
2.3 Pasos a seguir durante el trabajo en Notepad

1.- Abrir el bloc de notas
2.- Realizar la captura de las etiquetas de nuestra página html.

Alcántara 17
3.- Elegir en el menú Archivo la opción Guardar Como…

• En la opción
Guardar en: Ubicar
la carpeta donde
guardará el archivo.
• En el área nombre
ponerle nombre el
archivo con su
extensión p.e.
ejemplo1.html.
• En el área tipo:
elegir Todos de los
Archivos.
• Por último dar clic
en el botón guardar.
4.- Visualizarlo en el
navegador.
2.4 Ejemplos de código HTML
2.4.1 Fondo (color o imagen) de nuestra página
ej001.html
<html>
<head>
<title>
.: Centro de Estudios Universitarios :.
</title>
</head>
<body>
</body>
</html>
ej002.html
<html>
<head>
<title>
</title>
</head>
<body bgcolor = “green”>
Centro de Estudios Universitarios
</body>
</html>
Alcántara 18
Colores: yellow, green, blue, black, purple, cyan, pink, gray, orange, etc.
En la imagen se puede visualiza el título de la página, el contenido dentro del body o

cuerpo de nuestra página, así como el color que se utilizó dentro de la etiqueta body
con el agregado bgcolor.
Así mismo, se puede incluir una imagen de fondo de nuestra página, a continuación
se muestra un ejemplo.
ej003.html
<html>
<head>
<title>
</title>
</head>
<body background = “cerro.jpg”>
Centro de Estudios Universitarios
</body>
</html>
Alcántara 19
2.4.2 Dando Formato al Texto del Documento
Como ya habíamos mencionado, el HTML no distingue más de un espacio entre

caracteres, saltos de línea, negrilla, cursiva, tamaño y tipo de fuente, viñetas, entre
otras. Para lograr tales características en el texto del documento HTML (recordemos
que el texto va dentro del cuerpo del documento entre las etiquetas <BODY>
</BODY>) se debe hacer uso de las etiquetas que explicaremos a continuación.
Etiquetas de formato:
Negrita Texto en negrita
Cursiva Texto en cursiva
Subrayado Texto subrayado
Monoespaciado <TT> Texto como si estuviera escrito en máquina de escribir </TT>
<PRE> Texto que conserva todos sus espacios y tabuladores, y
Preformateado
aparece en formato monoespaciado</PRE>
Etiquetas para párrafos:
Nuevo párrafo (dos


espacios)
Alcántara 20
Línea horizontal <HR>

Salto de línea (un
 
espacio)
<Hx> </Hx>. Donde x es un número entre 1 y 6, siendo 1 el
Tamaño de la fuente
tamaño mas grande y 6 el más pequeño
Color de la fuente Añade color al texto
ej004.html
<html>
<head>
<title>
</title>
</head>
FORMATEO DE TEXTO 
Centro de Estudios Universitarios 
Centro de Estudios Universitarios 
Centro de Estudios Universitarios 
<tt>Centro de Estudios Universitarios</tt> 
<pre>Centro de Estudios Universitarios</pre> 
Centro de Estudios Universitarios 
<h1>Centro de Estudios Universitarios</h1> 
Centro de Estudios

Universitarios
Centro de
Estudios Universitarios
Centro de Estudios Universitarios

Centro de Estudios
Universitarios
</body>
</html>
Alcántara 21
2.4.3 Listas
Las listas sirven para desplegar la información que debe ser enumerada o tabulada
de una manera organizada. En el lenguaje HTML se pueden construir varios tipos de
listas:
2.4.3.1 Lista numerada:

Numera los párrafos u objetos que se encuentran dentro de la siguiente estructura:
<OL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</OL>
Útiles para crear tablas de posiciones y enumerar procedimientos.
2.4.3.2 Lista con viñetas:

Inserta un punto negro a los párrafos u objetos que se encuentran dentro de la
siguiente estructura:
Alcántara 22
<UL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</UL>
Son útiles para enumerar por puntos los comentarios de su página.
2.4.3.3 Lista de definición:

Son útiles para las entradas de tipo diccionario o para las secciones de documentos
donde un término es el encabezado de la sección y la definición es el texto de
aquella. La estructura es la siguiente:
<DL>
<DT> Primer término.
<DD> Primera definición.
<DT> Segundo término.
<DD> Segunda definición.
Etc...
</DL>
A cada una de estas listas se les puede crear una lista dentro de ellas, simplemente
agregando la estructura deseada dentro de la etiqueta correspondiente.
ej005.html
<html>
<head>
<title>
</title>
</head>
LISTAS 
<ol>
<li> Primer párrafo
<li> Segundo párrafo
<li> etc...
</ol>
<ul>
<li> Primer párrafo
<li> Segundo párrafo
<li> etc...
</ul>
<dl>
<dt> Primer término.
<dd> Primera definición.
<dt> Segundo término.
<dd> Segunda definición.
Alcántara 23
</dl>
</body>
</html>
2.5 Vínculos de Hypertexto
El hipertexto son vínculos dentro del texto del documento HTML que permiten al
usuario navegar con facilidad a través de la web, tanto a nivel interno como externo,
es decir, pueden crearse vínculos que lleven hacia una misma parte del documento
(interno) o hacia otra parte del mundo Web (externo). También existen otro tipo de
vínculos que llevan al navegador a otras partes como correo, ftp, entre otras.
Las etiquetas HTML que se encargan de generar los vínculos son <A> y </A>. A
esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se
realiza de la siguiente manera:
<A HREF="URL">Texto del vínculo</A>
2.5.1 Vínculos externos hacia páginas lejanas
Este vínculo envía al lector fuera de la página hacia otro site Web. Generalmente
son usados para relacionar al usuario con otros sitios interesantes en el mundo Web.
Alcántara 24
El URL será entonces la dirección completa de la página a la que se desea crear el

vínculo. Ejemplo: http://www.sct.gob.mx
2.5.2 Vínculos externos hacia páginas cercanas
Generalmente las personas que diseñan sus páginas no encuentran cómodo

desplegar toda la información en una sola, sino que crean varias páginas vinculadas
entre sí. Por ejemplo, es común ver una página principal (Home Page) con una tabla
de contenido a la cual se le han creado vínculos hacia cada uno de sus temas. Estos
vínculos son hacia archivos HTML que, generalmente, se encuentran en el mismo
directorio de la página principal.
El URL será entonces la ruta completa (incluyendo el nombre del archivo) que lleva
al visualizador a cargar el documento que se desea desplegar.
Por ejemplo si se crea una página para que las personas que visiten al Home Page
registren su visita. Si el nombre de documento es firmas.html y se encuentra en el
mismo directorio de la Home Page, el URL sería firmas.html.
2.5.3 Vínculos internos: anclas
Cuando una página tiene un gran contenido, es posible hacer que el usuario
navegue a través de la página. Para ello se debe marcar tanto el inicio como el fin
del ancla.
Para marcar el inicio del ancla se utiliza la etiqueta <A HREF="#sección"> Texto que
relaciona al ancla </A>. Nótese que lo que sería en los otros casos el URL se ha
cambiado por el nombre que se le da al ancla, precedido del signo #.
Para marcar el fin del ancla (a donde debemos llegar) se hace uso de la etiqueta <A
NAME="sección"> Texto del ancla </A>. Donde "sección" debe coincidir con el
nombre designado en el inicio del ancla.
2.5.4 Vínculos de correo electrónico
Por lo general las personas que diseñan sus páginas proporcionan la opción de
tener una retroalimentación por parte del visitante. La manera más sencilla de lograr
esto es través de un vínculo que lleve al navegador a un cuadro de correo
electrónico con la dirección determinada.
La estructura es la siguiente:
<A HREF=”mailto:dirección de correo electrónico" Texto del vínculo </A>

Ejemplo:
Alcántara 25
<A HREF=”mailto:edpq148cronos.eafit.edu.co" Sugerencias y

comentarios</A>
ej006.html
<html>
<head>
<title>
</title>
</head>
LINKS 
Enlaces hacia fuera de nuestro sitio
<a href="http://www.google.com.mx">Enlace hacia google</a>
<a href="http://www.yahoo.com.mx">Enlace hacia yahoo</a>
Enlaces dentro del sitio
<a href="ej006_1.html">Abrir ejemplo006_1</a> 
<a href="ej006_2.html">Abrir ejemplo006_2</a>
Enlace hacia correo electrónico
<a href="mailto:joalcant@ceu.edu.mx">Quejas o
Sugerencias</a>
</body>
</html>
ej006_1.html
<html>
<head>
<title>
</title>
</head>
USTED HA ELEGIDO ABRIR EL ARCHIVO EJ006_1 
<a href="ej006.html">Regresar a la página anterior</a>
</body>
</html>
ej006_2.html
<html>
<head>
<title>
</title>
</head>
USTED HA ELEGIDO ABRIR EL ARCHIVO EJ006_2 
<a href="ej006.html">Regresar a la página anterior</a>
</body>
Alcántara 26
</html>
ej007.html ANCLAS
<html>
<head>
<title>
</title>
</head>
<a name="inicio"></a>NOTICIAS 
<ul>
<li><a href="#internacional">
Internacional</a>
<li> <a
href="#nacional">Nacional</a>
<li><a href="#deportes">
Deportes</a>
</ul>
 
 
<a

name="internacional"></a>Internacional
Un fuerte terremoto activa la
Alcántara 27
alerta de tsunami en Indonesia

jueves 26 de julio, 06:27 AM 

 
YAKARTA (Reuters) - Un fuerte terremoto submarino sacudió el jueves la provincia

de Maluku del Norte en Indonesia, desencadenando una alerta por tsunami, según
informó en un mensaje de texto la agencia meteorológica del país.
La agencia dijo que el sismo tuvo una magnitud de 6,6 grados en la escala de
Richter, mientras que el Centro Geológico de Estados Unidos situó la intensidad del
temblor en 7,4 grados y dijo que el epicentro estaba a 88 kilómetros de profundidad.
 

<a
href="#inicio">Regresar</a>
 
 

name="nacional"></a>Nacional
El candidato mexicano aprovecha escándalo de empresario chino para su campaña
México, 26 jul (EFE).- Un candidato a alcalde en México aprovechó el alboroto

surgido en el país en torno al caso de un empresario chino al que se le hallaron 205
millones de dólares en efectivo en su domicilio, al escoger una frase del acusado
como lema electoral.
"Coopelas (cooperas)... votas por el chino o (te corto el) cuello", reza el eslogan
utilizado por Adrián Ávila, el aspirante por el Movimiento Ciudadano a la alcaldía del
municipio de Boca del Río, en el estado oriental de Veracruz. El eslogan de Ávila,
apodado "el chino", parafrasea la amenaza que el empresario chino Zhenli Ye Gon,
detenido esta semana en EE.UU. por lavado de dinero y narcotráfico, dijo haber
recibido de personas cercanas al actual gobierno mexicano para guardar la fortuna
que le fue encontrada.
<a
href="#inicio">Regresar</a> 

 
 

name="deportes"></a>Deportes

Futuro de Nery Castillo en Olympiakos se resolverá en próximos días 
(miércoles 25 de julio, 03:04 PM) 
Alcántara 28

México, 25 Jul (Notimex).- Luego de su extraordinaria actuación con la selección de
México, el delantero Nery Alberto Castillo subió sus bonos y se cotizó en el mercado
europeo, por lo que se espera la aprobación del Olympiakos griego para buscar
nuevos horizontes.
Así lo manifestó Nery Castillo, papá y representante del jugador, quien en entrevista
con la estación de radio "Estadio W" aseguró que será en los próximos días cuando
se decida el futuro del futbolista de 23 años de edad.
"Este fin de semana se va a decidir, esperemos que Olympiakos entienda la

oportunidad de Nery, y si están a gusto con él esperemos que lo apoyen, creo que lo
entenderán", dijo el ex jugador, quien señaló que las ofertas concretas son de
Ucrania e Inglaterra.
El jugador tiene contrato con Olympiakos pero hay ofertas del Manchester City (Liga
Premier) y Shakhtar Donetsk (Ucrania), incluso, se habla de 20 millones de dólares
que ofrecerían los ingleses para hacerse de los servicios del jugador.
</body>
</html>
2.6 Agregando Imágenes a su Página
Las páginas en el Web no deben estar llenas de texto por todos lados pues esto
hace que los visitantes se cansen de verlas y como resultado obtendrán una página
que nunca es visitada. Una herramienta muy útil para hacer de las páginas un
documento llamativo y amigable es hacer uso de imágenes relacionadas con el texto
al que se está haciendo referencia. ¿Se imaginan una valla publicitaria sin ningún
tipo de imagen?
También es muy importante una excelente combinación de colores de fondo y de

texto, con el fin de hacer que la página sea lo más entendible posible. Es en este
punto donde entra a jugar la creatividad del diseñador.
Para colocar una imagen en una página basta con llamarla desde el documento
HTML (es similar los vínculos hacia páginas cercanas). Lo primero es diseñar el
gráfico deseado en cualquier programa de dibujo como el Corel Draw o el Adobe
Photoshop, luego se debe convertir a cualquiera de los formatos aceptados por el
lenguaje HTML (GIF y JPEG).
La estructura es la siguiente:
<IMG SRC= "Nombre del archivo (incluye extensión)" >
ej008.html IMÁGENES
<html>
Alcántara 29
<head>
<title>
</title>
</head>
<img src=" cerro.jpg" width="449" height="273">

<img src="cinter2.jpg" width="453" height="300">

</body>
</html>
2.7 Uso de Tablas
En general las tablas pueden ser sin borde o con borde.
La tabla sin borde es quizás la herramienta más útil en la codificación HTML, pues a
través de ellas podemos organizar nuestro documento como lo deseemos, teniendo
en cuenta que el HTML no entiende más de un espacio, tabulador o salto de línea.
Pero ¿por qué no hacerlo usando la etiqueta preformateado para arreglar la

distribución de mi documento?
Alcántara 30
Sencillo: como todos sabemos esta etiqueta despliega el texto en el tipo de letra
monoespaciado y no permite cambios ni de forma ni de tamaño. Conclusión; el
documento se vería horrible.
La tabla con borde es útil para desplegar tablas de contenido, resúmenes, cuadros
de atención, entre otras.
Pero ¿qué es una tabla?: es un conjunto rectangular de filas y columnas que

aparecen en su pantalla.
2.7.1 Estructura básica de las tablas
<TABLE WIDTH = “100%” BORDER="Número entre 0 y 7">
<TR>inicio de fila
<TD>Primera fila, primera columna</TD>
<TD>Primera fila, segunda columna</TD>
<TD>Primera fila, tercera columna</TD>
..........
</TR>fin de fila
<TR>inicio de fila
<TD>Segunda fila, primera columna</TD>
..........
</TR>fin de fila
etc...
</TABLE>
Notas:
El número que se designa en la etiqueta <TABLE BORDER="Número entre 0
y 7"> determina el ancho del borde de la tabla. Este número puede estar entre
0 y 7.
Alcántara 31
ej009.html TABLAS
<html>
<head>
<title>
</title>
</head>
<table width="100%" border="2">
<tr bgcolor="ORANGE">
<td colspan="5">
<div align="center">MATERIAL TELECOMUNICACIONES</div>
</td>
</tr>
<tr>
<td>NOMBRE</td>
<td>UNIDAD 1</td>
<td>UNIDAD 2</td>
<td>UNIDAD 3</td>
<td>PROMEDIO</td>
</tr>
<tr>
<td>JUAN LUNA GARZA</td>
<td>8</td>
<td>9</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>GRISELDA GALINDO</td>
<td>9</td>
<td>8</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>LETY VILLANUEVA</td>
<td>9</td>
<td>8</td>
<td>10</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Alcántara 32
Alcántara 33
Unidad 3.- Dreamweaver
3.1 Requisitos del sistema

Para ejecutar Dreamweaver, es preciso disponer del hardware y el software
siguientes.
Para Microsoft Windows:
• Un procesador Intel Pentium o equivalente a 166 MHz o superior que ejecute
Windows 95, Windows 98, Windows 2000, Windows Me, Windows XP.
• La versión 4.0 o posterior de Netscape Navigator o Microsoft Internet Explorer.
• 32 MB de memoria de acceso aleatorio (RAM), además de 110 MB de espacio libre
en el disco duro.
• Un monitor de 256 colores con capacidad para mostrar una resolución de 800 x
600 píxeles.
• Una unidad de CD-ROM.
3.2 Aspectos básicos de Dreamweaver

Para empezar a trabajar con Dreamweaver hay que considerar las diferentes
herramientas, áreas y ventanas que nos ofrece este software, entre ellas:
• Área de trabajo
• Diferentes vistas
• Ventanas de Dreamweaver
• Configurar el sitio
3.2.1 Área de trabajo

El área de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y
a diversos niveles de experiencia. Estos son algunos de los componentes que se
utilizan más habitualmente:
Alcántara 34
La ventana de documento muestra el documento actual mientras lo está creando y

editando.
• La barra del lanzador, situada en la parte inferior derecha de la ventana de
documento, contiene botones que permiten abrir y cerrar los inspectores y
paneles que utiliza con mayor frecuencia. Los iconos de la barra del lanzador
también aparecen en el lanzador, un panel flotante que puede elegir del menú
Ventana.
• La barra de herramientas contiene botones y menús emergentes que le
permiten ver la ventana de documento de diferentes formas, definir opciones
de vista y obtener acceso a algunas operaciones comunes, como, por
ejemplo, previsualizar en un navegador.
• Los menús contextuales permiten acceder rápidamente a comandos útiles
pertinentes para la selección o área actual. Para ver un menú contextual,
haga clic con el botón derecho del ratón (Windows) o haga clic en un
elemento de una ventana mientras presiona la tecla Control (Macintosh).
• El panel Objetos contiene botones para la creación e inserción de diversos
tipos de objetos, como imágenes, tablas, capas y marcos. También puede
alternar entre vista Estándar y de Disposición y obtener acceso a las
herramientas de dibujo de la vista Disposición.
• El inspector de propiedades muestra propiedades del objeto o texto
seleccionado y permite modificar dichas propiedades. (Las propiedades que
aparecen en el inspector dependen del objeto o texto seleccionado).
• Para abrir ventanas, inspectores y paneles de Dreamweaver, utilice el menú
Ventana. Una marca de verificación al lado de un elemento de este menú
indica que el elemento señalado se encuentra abierto, aunque puede estar
oculto detrás de otras ventanas. Para ver un elemento que actualmente no
está abierto, elija el nombre del elemento del menú.
3.2.2 Diferentes vistas de Dreamweaver

Dreamweaver le permite trabajar en su documento de diferentes formas: utilizando la
vista Diseño, utilizando la vista Código o empleando una vista combinada que
muestra el diseño y el código del documento. Puede
cambiar la vista en la que desea trabajar seleccionando
una vista en la barra de herramientas de Dreamweaver.
Trabajar con la vista de Código

Conforme diseñe y trabaje con los documentos,
Dreamweaver generará automáticamente el código
HTML subyacente. Para examinar o editar este código,
utilice uno de los editores de código de Dreamweaver:
la vista de Código de la ventana de documento o el
inspector de código.
Alcántara 35
3.2.2.1 Trabajar con la vista de Diseño

La vista de Diseño de Dreamweaver muestra una representación visual del
documento, en lugar del código subyacente. Cuando trabaje en la vista de Diseño,
podrá optar entre dos vistas para realizar el diseño: vista de Disposición o vista
Estándar. Puede seleccionar estas vistas en el panel Objetos, bajo Ver.
En la vista de Disposición, puede diseñar una disposición de página e insertar
gráficos, texto y otros elementos multimedia.
Trabaje en la vista Estándar para insertar capas, crear documentos de marcos, crear
tablas o utilizar otras funciones no disponibles en la vista de Disposición. Para
trabajar en la vista Estándar, haga clic en el icono Vista estándar del panel Objetos.
La ventana de documento
En la vista de Diseño, la ventana de documento muestra el documento actual
aproximadamente igual a como aparecerá en un navegador Web. La barra de título
de la ventana de documento muestra el título de la página y, entre paréntesis, el
nombre de la carpeta raíz, el nombre del archivo y un asterisco si el archivo contiene
cambios no guardados.
3.2.3 Ventanas de Dreamweaver
3.2.3.1 Barra de herramientas

La barra de herramientas contiene algunos comandos comunes relacionados con la
selección de vistas y el estado del documento. Los elementos del menú Opciones
(botón situado a la derecha) cambia en función de la vista que seleccione.
• Para ver u ocultar la barra de herramientas, elija Ver > Barra de herramientas.
• Para ver código sólo en la ventana de documento, haga clic en el botón
Mostrar vista de código.
• Para ver una vista que contenga las vistas de Código y de Diseño, haga clic
en el botón Mostrar vistas de código y diseño. Cuando seleccione esta vista,
se encontrará disponible la opción Vista de diseño arriba del menú Ver.
Utilice esta opción para especificar qué vista debe aparecer en la parte
superior de la ventana de documento.
• Para ver sólo la vista de Diseño, haga clic en el botón Mostrar vista de diseño.
• También puede obtener acceso a estas vistas a través del menú Ver.
Alcántara 36
• Para introducir un título para el documento, utilice el campo Título. Si el

documento ya tiene título, éste aparecerá en dicho campo.
• Para ver el menú emergente Estado de archivo, haga clic en el botón de
menú de estado de archivo.
• Para previsualizar o depurar un documento en un navegador, haga clic en
Vista previa/depurar en navegador y elija uno de los navegadores
enumerados en el menú emergente.
• Para agregar o cambiar los navegadores enumerados en el menú, elija Editar
lista de navegadores.
• Para actualizar la vista de Diseño, haga clic en el botón Actualizar vista de
diseño.
• Para obtener acceso al panel Referencia, haga clic en el botón Referencia. El
panel Referencia contiene información de referencia sobre código HTML, CSS
y JavaScript.
• Para desplazarse por el código, haga clic en el botón Navegación por el
código.
3.2.3.2 Panel de Objetos

El panel Objetos contiene botones para la creación e inserción de diversos tipos de
objetos, como tablas, capas e imágenes. Para mostrar u ocultar el panel Objetos,
elija Ventana > Objetos.
El panel Objetos contiene siete categorías de forma predeterminada: Caracteres,
Común, Formularios, Marcos, Head, Invisibles y Especial. También contiene botones
que cambian de vista: Estándar y Disposición.
Alcántara 37
• El panel Caracteres contiene caracteres especiales, como los símbolos de

copyright, de comillas curvas y de marca registrada. Tenga en cuenta que
estos símbolos no se muestran correctamente en las versiones anteriores a la
3.0 de los navegadores (Netscape e IE).
• La categoría Común contiene botones para la creación e inserción de los
objetos más utilizados, como imágenes, tablas y capas.
• La categoría Formularios contiene botones que permiten crear formularios e
insertar elementos de formulario.
• La categoría Marcos contiene estructuras comunes de conjuntos de marcos.
• La categoría Head contiene botones que permiten añadir diversos elementos
de la sección head, como etiquetas meta, keywords y base.
• La categoría Invisibles contiene botones que permiten crear objetos no
visibles en la ventana del navegador, como los puntos de fijación con nombre.
Elija Ver > Ayudas visuales > Elementos invisibles para ver los iconos que
marcan la posición de estos objetos. Haga clic en los iconos de elementos
invisibles de la ventana de documento para seleccionar los objetos y cambiar
sus propiedades.
• La categoría Especial contiene botones que permiten insertar elementos
especiales, como applets Java, plug-ins y objetos ActiveX.
La sección Ver del panel Objetos permite elegir entre vista Estándar
(predeterminada) o de Disposición. Si está seleccionada la vista de Disposición,
también podrá seleccionar las herramientas de Disposición: Dibujar celda de
disposición y Dibujar tabla de disposición.
Alcántara 38
• Cuando inserte objetos tales como imágenes, tablas, secuencias de

comandos y elementos head, aparecerá un cuadro de diálogo en el que se le
solicitará información adicional. Puede suprimir estos cuadros de diálogo
desactivando la opción Mostrar diálogo al insertar objetos o manteniendo
presionada la tecla Control mientras crea el objeto. Cuando se inserta un
objeto con esta opción desactivada, el objeto recibe valores de atributo
predeterminados. Después de insertar el objeto, utilice el inspector de
propiedades para cambiar sus propiedades.
• Las preferencias del panel Objetos permiten visualizar el contenido del panel
Objetos como texto solamente, iconos solamente o texto e iconos.
3.2.3.3 Inspector de Propiedades

El inspector de propiedades permite examinar y editar las propiedades del elemento
de página seleccionado en ese momento. (Un elemento de página es un objeto o
texto) Puede seleccionar elementos de página en la ventana de documento o en el
inspector de código.
Para mostrar u ocultar el inspector de propiedades, elija Ventana > Propiedades.
La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato

en la ventana de documento. (Para algunas propiedades, los cambios no se aplican
hasta que se hace clic fuera de los campos de texto de edición de la propiedad, se
presiona Entrar (enter) o se presiona Tab para cambiar a otra propiedad).
El contenido del inspector de propiedades varía en función del elemento

seleccionado. Para obtener información sobre propiedades concretas, seleccione un
elemento en la ventana de documento y, a continuación, haga clic en el icono
Ayuda, situado en la esquina superior derecha del inspector de propiedades.
Inspector de propiedades al seleccionar una imagen.

Alcántara 39
Inspector de propiedades al seleccionar una tabla o celda de la misma.
Para darle formato al texto, primero debemos seleccionar el texto deseado y luego
seleccionar las propiedades para el mismo en el Inspector de Propiedades.
• Formato (Format): Aplica un estilo predefinido al texto.

• Combinación de Fuentes (Font Combination): Aplica una combinación de
fuentes al texto. Las fuentes están agrupadas por familias. Si el usuario no
posee instalada la primera fuente del listado, el navegador buscará la
segunda de la lista y luego la tercera. Si ninguna de ellas está presente,
mostrará el texto con el tipo de fuente estándar con el que del navegador.
• Tamaño (Size): Aplica un tamaño de fuente específico en una escala que va
de 1 a 7 o un tamaño de fuente relativo al tamaño por defecto del navegador.
En este caso los valores van de + o -1 a+ o -7.
• Negrita e Itálica (Bold/ltalic): Aplican al texto estos estilos.
• Izquierda, Centro y Derecha (Left, Center, Right): Aplican alineación al texto.
• Color de texto (Text Color): Define el color para el texto seleccionado.
Espacio entre líneas.

Existen dos tipos de saltos que podemos introducir en nuestro texto:
el salto de línea y el salto de párrafo.
• Cuando pulsamos Enter, ingresamos un salto de párrafo.
• Cuando pulsamos Shift Enter, insertamos un salto de línea (más pequeño).
3.2.4 Configurar el Sitio
El desarrollo de un sitio Web con Dreamweaver comienza en la definición de una

carpeta local para el sitio. En esta carpeta se guardarán todos los archivos que lo
conformen.
Debemos hacer una carpeta en nuestro disco duro de la computadora para cada
sitio que deseemos crear y así poder administrar de una mejor manera todo lo
correspondiente en cuanto archivos e imágenes que corresponden a cada uno de
ellos.
Alcántara 40
3.2.4.1 Planificación y diseño de sitios

En Dreamweaver, el término sitio puede hacer referencia a un sitio Web o un
emplazamiento local de almacenamiento de documentos pertenecientes a un sitio
Web. Cuando comience a pensar en la creación de un sitio Web, debe seguir una
serie de pasos de planificación para asegurarse de que el sitio sea un éxito. Incluso
en el caso de que vaya a crear tan sólo una página principal personal que sólo verán
los amigos y la familia, será conveniente planificar el sitio cuidadosamente para
asegurarse de que todo el mundo pueda utilizarlo correctamente.
Divida el sitio en categorías. Coloque las páginas relacionadas en una misma

carpeta. Por ejemplo, los comunicados de prensa de la compañía, la información
sobre contactos y las ofertas de trabajo pueden colocarse en una carpeta, y las
páginas del catálogo en línea pueden ir en otra. Utilice subcarpetas cuando sea
necesario. Este tipo de
organización facilitará el
mantenimiento y la
navegación por el sitio.
Utilice la misma
estructura para sitios
locales y remotos.
El sitio local y el sitioWeb
remoto deberán tener
exactamente la misma
estructura. Si crea un
sitio local utilizando
Dreamweaver y, a
continuación, carga todo en el sitio remoto, Dreamweaver se asegurará de que la
estructura local se duplique con precisión en el entorno remoto.
3.2.4.2 Configurar sitios con Dreamweaver

Una vez que cree la estructura del sitio, deberá establecer el nuevo sitio en
Dreamweaver. Establecer este sitio local en Dreamweaver significa que puede
utilizar Dreamweaver con FTP para cargar el sitio en el servidor Web, para controlar
y mantener automáticamente los vínculos y para compartir archivos con otras
personas que colaboren con usted. Lo más adecuado es configurar el sitio local en
Dreamweaver antes de comenzar a crear las páginas.
El sitio local es la estructura del sitio que usted establece en el equipo para que
contenga todas las carpetas, activos y archivos de un sitio concreto.
La carpeta raíz local del sitio deberá ser específica de ese sitio. Una buena idea es
crear una carpeta llamada Sitios y, posteriormente, crear carpetas raíz locales dentro
de esa carpeta, una para cada sitio con el que trabaje.
Crear un Sitio Nuevo

Para crear un sitio nuevo:
Alcántara 41
1.- Elija Sitio > Nuevo sitio.

En el cuadro de diálogo Definición de sitio que aparece estará seleccionada la
categoría Datos locales.
2.- Introduzca las opciones siguientes:
• En el campo Nombre del sitio, introduzca un nombre para el sitio. El nombre
del sitio aparece en la ventana Sitio y en el submenú Sitio > Abrir sitio. Utilice
el nombre que desee, ya que no aparecerá en el navegador y sólo le servirá
de referencia.
• En el campo Carpeta raíz local, especifique la carpeta del disco duro en la
que desea almacenar los archivos, las plantillas y los elementos de biblioteca
del sitio. Cuando Dreamweaver resuelve vínculos relativos a la raíz, lo hace
tomando esta carpeta como raíz. Haga clic en el icono de carpeta para
examinar y seleccionar la carpeta o introduzca una ruta y un nombre de
carpeta en el campo de texto. Si aún no existe la carpeta raíz local, créela
desde el cuadro de diálogo que permite examinar archivos.
• En la opción Actualizar lista archivos locales, indique si desea actualizar
automáticamente la lista de archivos locales cada vez que copie archivos en
el sitio local. Si desactiva esta opción, mejorará la velocidad de Dreamweaver
a la hora de copiar esos archivos, pero el panel Local de la ventana Sitio no
se actualizará automáticamente. Para actualizar manualmente la ventana
Sitio, haga clic en el botón Actualizar de la misma. Para actualizar
manualmente sólo el panel Local, elija Ver > Actualizar local en la ventana
Sitio (Windows) o Sitio > Ver archivos del sitio > Actualizar local (Macintosh).
• En el campo Dirección HTTP, introduzca el URL que utilizará el sitio Web
finalizado, de modo que Dreamweaver pueda verificar los vínculos del sitio
que utilicen URL absolutos. Por ejemplo, la dirección HTTP absoluta del sitio
Web de Macromedia es http://www.macromedia.com.
• En la opción Caché, indique si desea crear un caché local para mejorar la
velocidad de las tareas de administración de vínculos y sitios. Si no
selecciona esta opción, Dreamweaver volverá a preguntarle si desea utilizar
un caché antes de crear el sitio. Es recomendable seleccionar esta opción
porque el panel Activos sólo funciona cuando se ha creado un caché.
3.- Haga clic en Aceptar.
Se abrirá la ventana Archivos del sitio. Posteriormente, cuando esté listo para
publicar el sitio en un servidor remoto, deberá añadir información adicional sobre el
sitio.
Descripción gráfica de la definición o creación del sitio.

Alcántara 42
A continuación dar clic en la carpeta que aparece a la derecha del cuadro de texto
“Carpeta raíz local”, donde aparecerá la siguiente pantalla.
De ahí, buscar la carpeta que será considerada como carpeta raíz de nuestro sitio.
Alcántara 43
Así mismo, se pueden configurar los “Datos Remotos”, que es donde se introducen
los valores del servidor que hospedará nuestro sitio. Los archivos que vayamos
realizando podremos subirlos vía FTP.
Pantalla que muestra el sitio local y el sitio remoto, mediante el tomar los archivos
del sitio local y arrastrarlos al sitio remoto, podremos ir actualizando nuestra página
en Internet.
Alcántara 44
3.2.4.3 La ventana Sitio

Utilice la ventana Sitio para realizar operaciones de mantenimiento estándar, como
crear nuevos documentos HTML; ver, abrir y mover archivos; crear carpetas; y borrar
elementos. También puede utilizar la ventana Sitio para transferir archivos entre los
sitios local y remoto, al tiempo que puede diseñar la navegación del sitio empleando
el mapa del sitio.
Alcántara 45
3.3 Trabajando con Dreamweaver

Para empezar a trabajar con Dreamweaver, vamos a escribir el siguiente contenido:
Una vez terminado, lo que sigue es darle formato modificando el color del fondo de
la página.
Para hacerlo, hay que seleccionar el menú modificar, elegir opción propiedades de la
página y aparecerá la siguiente pantalla.
Elegir el color deseado, o si lo desea una imagen de fondo.

Alcántara 46
En la pantalla anterior podemos elegir atributos o características que deseamos en

la página, por ejemplo, el título de la página, imagen de fondo, color de fondo, color
del texto, color de los vínculos, etc.
A continuación, daremos formato al texto

El primer paso, es seleccionar o sombrear el texto a modificar su apariencia., y
posteriormente elegir las opciones que deseamos en el panel o inspector de
propiedades.
Como recomendación usar siempre tipo de fuente Arial.

• Primer paso sombrear todo y elegir tipo de letra (Arial, Helvetica, etc.).
• Sombrear “Centro de Estudios Universitarios”, en tamaño elegir 5, elegir color
del texto, seleccionar letra negrita, alineación centrada.
• Sombrear “Unidad Loma Larga”, en tamaño elegir 4, elegir color del texto,
seleccionar letra negrita, alineación centrada.
• Sombrear “Le ofrece las siguientes carreras” en tamaño elegir 3, elegir color
del texto, seleccionar letra negrita, seleccionar letra itálica.
• Sombrear todas las carreras de la pantalla, en tamaño elegir 3, elegir color
del texto, seleccionar presentación de texto con viñeta.
En el menú archivo, elegir la opción guardar, ponerle el nombre ej010.html

Listo, F12 para presentación preliminar.
Alcántara 47
La pantalla muestra el resultado del formateo al texto que hemos realizado.
3.4 Insertar Imagen
Para insertar una imagen es conveniente tenerla previamente guardada en la

carpeta del sitio. De lo contrario Dreamweaver nos advertirá para que guardemos
una copia en la carpeta correspondiente.
Las imágenes pueden estar sueltas en la carpeta raíz junto con los archivos de cada
uno de los documentos o, mucho mejor, en una carpeta especial dentro del sitio a la
que llamaremos imágenes (nombre de los archivos y carpetas sin acentos) o
cualquier otro nombre que nos sugiera que, dentro de esa carpeta, están nuestras
imágenes.
Para insertar la imagen hay que dar clic en el objeto de insertar imagen, del
panel de objetos. O bien en el menú insertar opción imagen, aparecerá la siguiente
pantalla.
Elegir las imágenes que

desees insertar (una por
una) y aparecerán en la
pantalla.
Alcántara 48
Al igual que el texto, a las imágenes se le pueden dar algunas propiedades dentro
del inspector de propiedades.
Directamente se puede cambiar la dimensión de una imagen, agregarle un borde, o

un texto alternativo al acercar el puntero, además de utilizar zonas interactivas que
permiten dividir la imagen para algún uso en especial, y también podemos utilizar la
imagen para vincularlo hacia otra página externa o dentro de la misma.
Alcántara 49
3.5 Insertar Tabla

Para insertar una tabla se puede realizar desde el menú con la opción insertar tabla
o clic en el botón tabla del panel de objetos.
Podemos determinar el número de Filas, el número de Columnas, el Ancho de la

tabla en píxeles o porcentaje, especificar si queremos que la tabla tenga Borde e
indicarle el grosor del borde en su caso. El relleno de celda hace referencia al
Alcántara 50
espacio que queremos que exista entre el texto, o lo que coloquemos en cada una
de las celdas, y su borde. El Espacio celda es el espacio que queremos que haya
entre una celda y otra. Ambos se indican en píxeles y se pueden quedar vacíos en el
caso de que queramos que tanto el relleno de celda como el espacio de celda sea el
mínimo posible.
A modo de ejemplo vamos a insertar una tabla con 5 filas y 6 columnas y que ocupe
el 100 % del ancho, un borde de 2 píxeles y un relleno de celda de 5 píxeles:
Rellenamos las celdas con los siguientes datos…
Vamos a darle formato…
• Sombrear todas las celdas y elegir el texto con Arial, helvetica.

• Seleccionar la fila completa donde está el texto de “Ventas de la Semana”,
elegir el botón de agrupar celdas, centrar el texto y ponerlo en formato
negritas, si lo desea elegir un color al fondo de la celda.
• Sombrear el texto restante y elegir la opción de centrar
Alcántara 51
• Elegir la fila de los días, agregarle fondo a las celdas.

• Elegir la fila de totales, agregarle fondo a las celdas.
Añadir filas o columnas se hace mediante el inspector de propiedades, tomando la

opción de dividir celda.
Dividir celda
3.6 Importar datos desde Excel

Si tenemos un archivo en Excel y queremos pasarlo a la página html, no es
necesario transcribirlo todo, podemos importarlo.
Menu insertar, elegir datos tabulares o en el botón de la barra de objetos.
Primer paso, abrir el archivo requerido en Excel .

Dentro de Excel elegir Archivo, guardar como… y en tipo elegir CSV (delimitado por
comas), de preferencia que el nombre quede como el original.
Al elegir esta opción le saldrán dos pantallas donde le advierte que solamente se
guardará la página activa Elija Aceptar, la otra pantalla le mencionará que si desea
mantener los formatos, elija Si.
Alcántara 52
A continuación elegir insertar datos tabulares, localizar el archivo a ser insertado.
Muestra del archivo insertado

Alcántara 53
Lo que sigue es darle formato a la tabla, mismo que ya se ha visto en secciones

anteriores.
3.7 Vínculos
Los vínculos, hipervínculos, enlaces, hiperenlaces (todas estas palabras designan el

mismo concepto) es uno de los elementos más importantes del lenguaje HTML con
el que se construyen las páginas web.
Para llevar a cabo nuestro ejemplo, es necesario crear una tabla de 4 filas con 2
columnas, y posteriormente insertar imágenes en la primer columna y texto en la
siguiente, a continuación se muestra el ejemplo de cómo debe de quedar.
Para llevar a cabo la vinculación, trabajamos en el inspector de propiedades y

relacionamos los archivos a donde deseamos enlazar a nuestros visitantes.
Si se agregan imágenes a un lado de los enlaces, es recomendable incluir los

enlaces tanto en la imagen como en el texto.
En el primer caso el link hacia el CEU es una liga externa a nuestra página, por lo
que podemos escribir directamente el URL.
En Abrir Página Web, ésta se encuentra en nuestro sitio, por lo que podemos dar clic
en el fólder para buscar el archivo deseado, al igual que en Abrir archivo, buscar el
archivo requerido
Podemos elegir destino donde queremos que aparezca la página solicitada.
Alcántara 54
Para el caso de Enviar Correo, dar clic en insertar opción vínculo de correo
electrónico. Aparece la siguiente pantalla…
Donde podemos agregar el correo a donde queremos enviar el mensaje, después de

aquí se abrirá la pantalla de Outlook.
3.7.1 Anclas
Se utilizan cuando queremos que al dar clic en el activador se nos coloque al

principio de la página, al final, al comienzo de un apartado determinado, ... siempre
dentro del mismo documento.
Para ello primeramente hay que hacer marcas en los puntos a los cuales queremos
que vaya el vínculo, es decir insertar el ancla con el punto de fijación, mismo que se
encuentra en el panel de invisibles.
Lo hacemos con el comienzo: Situamos el cursor delante del título del documento
(delante de vínculos) y elegimos en la barra de menús Insertar > Punto de fijación
Alcántara 55
con nombre o bien en la ventana de objetos, elegir la sección de invisibles y busca el

ancla.
Escribimos el contenido
Colocarse antes de cada palabra que queremos que sea buscada mediante el
enlace, por ejemplo, nos posicionamos antes de la palabra internacional (la que
contiene información, no de la lista) posteriormente Menu insertar, etiquetas
invisibles, punto de fijación con nombre y aparece la siguiente pantalla. Se
recomienda que el nombre sea acorde al tema buscado.
Por lo que el ejemplo tendrá puntos de fijación en Internacional, Nacional, Deportes

y también Noticias que será el punto a donde regresamos después de leer una nota
de cualquiera de los temas.
Para vincularlo se hace de la siguiente manera: elegir internacional de la lista

principal y posteriormente arrastrar el enlace como se muestra en la siguiente figura.
Alcántara 56
Cuando el ancla o punto de fijación está más abajo, se complica realizar la unión
para la vinculación, por lo que se puede optar por sombrear el texto de la lista por
ejemplo Nacional y en el área del vínculo agregar #nacional, y así con cada enlace.
Una vez leída la nota, hay que agregarle un enlace al usuario para que se regrese
más rápido al índice de las noticias, por lo que hay que agregar un texto por ejemplo
Inicio y vincularlo con el punto de fijación que se haya agregado a Noticias (punto de
fijación con nombre inicio).
3.8 Marcos
Los marcos se utilizan para dividir una página Web en múltiples páginas HTML. Por
ejemplo, una página Web consta de tres marcos: un marco delgado a un lado que
contiene un menú de desplazamiento, un marco que se extiende por la parte
superior y contiene el logotipo y el título del sitio Web, y un marco grande que ocupa
el resto de la página y presenta el contenido principal. Cada uno de ellos constituye
una página HTML independiente. Estos marcos funcionan coordinadamente en la
página gracias al uso de uno o más conjuntos de marcos, es decir, de páginas
HTML que definen la estructura y las propiedades de la página Web, incluida la
información sobre el número de marcos que aparecen en una página, el tamaño de
los marcos, el origen de la página cargada en un marco y otras propiedades. La
página de conjunto de marcos no se muestra en los navegadores; se limita a
almacenar información sobre cómo deben mostrarse los marcos en una página. Sin
embargo, es la página que se muestra al utilizar Vista previa en el navegador.
Alcántara 57
En este ejemplo, el marco superior permanecería estático y no cambiaría en las

páginas del sitio. El menú del marco lateral tendría vínculos que cambiarían el
contenido del área del marco principal aunque, por lo demás, permanecería estático.
El área del marco principal es el área dinámica, que cambiaría según el elemento de
menú elegido. Puede aplicar formato a todos los marcos y conjuntos de marcos de la
página a través del inspector de propiedades. Puede activar o desactivar el
desplazamiento, establecer el ancho y el alto, asignar un nombre a cada página, etc.
Una página Web que contiene tres marcos consta de cuatro páginas HTML distintas:
el archivo de conjunto de marcos y los tres archivos que albergan el contenido que
aparece dentro de los marcos. Al diseñar una página utilizando conjuntos de marcos,
deberá guardar cada uno de estos cuatro archivos para que la página funcione
correctamente en el navegador.
¿Cuándo utilizar marcos?

El uso más común de los marcos es la navegación. Una página Web puede utilizar
un marco para albergar el menú de navegación y otro marco para el contenido de la
página. Dado que el menú de navegación se encuentra en un marco, los visitantes
pueden hacer clic en un elemento del menú y el contenido aparecerá en el marco de
contenido sin que cambie el menú de navegación. De este modo, el visitante podrá
orientarse perfectamente en el sitio.
Sin embargo, los marcos pueden ser difíciles de aplicar y a menudo es posible crear
una página Web sin marcos que consiga los mismos objetivos que una página con
marcos. Por ejemplo, si desea que la navegación se realice en la parte izquierda de
la página, puede dividir la página en dos marcos o, simplemente, incluir la
Alcántara 58
navegación izquierda en todas las páginas del sitio. La diferencia radica en que con
marcos sólo necesitará crear la navegación una vez. Si decide utilizar marcos en el
sitio Web, deberá conocer la relación entre los marcos y los conjuntos de marcos,
pues el establecimiento de vínculos con marcos puede resultar confuso.
Crear páginas Web basadas en marcos

Los marcos pueden ser una excelente herramienta para los diseñadores Web, pero
deben aplicarse correctamente para que funcionen. Siga los pasos que se detallan a
continuación para conseguir que la página Web funcione correctamente (no
necesariamente en un determinado orden):
• Cree el conjunto de marcos y los marcos de la página.
• Guarde todos los archivos utilizados en el sitio. Recuerde que cada marco y
conjunto de marcos es una página HTML independiente y que es necesario
guardar cada página.
• Defina las propiedades de cada marco y conjunto de marcos, incluidos sus
nombres, opciones de desplazamiento y no desplazamiento, etc.
• Compruebe que todos los vínculos incluyen su destino de modo que el
contenido vinculado aparezca en el área correcta.
3.8.1 Crear marcos

Hay dos formas de crear un conjunto de marcos en Dreamweaver: puede diseñarlo
usted mismo o seleccionarlo de una serie de conjuntos de marcos predefinidos. Si
elige un conjunto de marcos predefinido se configurarán automáticamente todos los
conjuntos de marcos y marcos necesarios para crear la disposición. Ésta es la forma
más sencilla de insertar rápidamente un diseño de marcos en la página. Sólo se
pueden crear marcos en la vista Diseño de la ventana de documento.
Insertar un conjunto de marcos predefinido

Los conjuntos de marcos predefinidos facilitan la selección del tipo de conjunto de
marcos que desea crear.
Los iconos de conjuntos de marcos predefinidos de la categoría Marcos del panel
Objetos proporcionan una representación visual de cada conjunto de marcos al
aplicarse a un documento seleccionado.
El conjunto de marcos seleccionado rodea al documento actual (el

documento en el que se encuentra el punto de inserción). El área azul de
un icono de conjunto de marcos predefinido representa la página o el
marco seleccionado actualmente en un documento, mientras que el área
blanca representa el nuevo o los nuevos marcos.
Para insertar un conjunto de marcos predefinido:

1.- Sitúe el punto de inserción en el documento.
2.- A continuación, lleve a cabo una de estas operaciones:
• En la categoría Marcos del panel Objetos, seleccione un conjunto
de marcos predefinido. Para insertar el conjunto de marcos, puede
hacer clic en un icono o arrastrar un icono directamente al
documento.
Alcántara 59
• Para seleccionar un conjunto de marcos predefinido, elija Insertar > Marcos >
Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba, Superior izquierda,
Izquierda superior o Dividir.
La siguiente acción a realizar es elegir el texto a vincular y buscar el archivo al cual

se va a enlazar, en el inspector de propiedades ubicar la opción Dest (destino donde
queremos que aparezca lo enlazado, ahí elegir Main Frame (Marco Principal).
Guardar archivos de marcos y conjuntos de marcos

Es preciso guardar un archivo de conjunto de marcos y sus archivos relacionados
para poder previsualizar la página en un navegador. Puede guardar de forma
individual una página del conjunto de marcos o una página de marco, o bien guardar
todos los archivos de marco abiertos y la página de conjunto de marcos.
Cuando se utiliza Dreamweaver para crear documentos de marcos, cada nuevo

documento de marco recibe un nombre de archivo temporal (por ejemplo,
Alcántara 60
UntitledFrame_1 para la página de conjunto de marcos, Untitled-1, Untitled-2, etc.

para las páginas de marcos).
Al seleccionar alguna de las opciones de almacenamiento, se abre el cuadro de

diálogo Guardar archivo para que pueda guardar el documento con su nombre de
archivo temporal. Dado que todos los archivos tienen por nombre “untitled” (sin
título), es difícil precisar qué archivo de marco se está guardando. Observe las
líneas de selección de marcos en la ventana de documento para identificar el
documento que se está guardando actualmente. El área seleccionada identifica el
marco al que se hace referencia actualmente en el cuadro de diálogo Guardar
archivo. El nombre de archivo del marco o conjunto de marcos seleccionado también
aparece en la barra de título.
Para guardar un archivo de conjunto de marcos:

1.- Seleccione el conjunto de marcos en el panel Marcos o en la ventana de
documento.
2.- Lleve a cabo una de estas operaciones:
• Para guardar el archivo de conjunto de marcos, elija Archivo > Guardar
conjunto de marcos.
• Para guardar el archivo de conjunto de marcos como un archivo nuevo, elija
Archivo > Guardar conjunto de marcos como.
Alcántara 61
3.- Para guardar un documento que está dentro de un marco:

• Haga clic en el marco para seleccionarlo y, a continuación, elija Archivo >
Guardar marco o Archivo > Guardar marco como.
3.9 Vistas de Disposición

Diseñar una página en la vista de Disposición
Dreamweaver cuenta con dos vistas de diseño visual: vista Estándar y vista de
Disposición. Comenzará a trabajar en la vista de Disposición, que le permite dibujar
celdas o tablas de disposición en las que podrá añadir contenido, como imágenes,
texto u otros elementos multimedia.
Para llevar a cabo la acción de trabajar con vistas de Disposición deberá realizar las
siguientes actividades:
1.- En el panel Objetos, haga clic en el icono de vista de Disposición si no está aún
seleccionado.
• Aparecerá el cuadro de diálogo Introducción a la vista de
Disposición, en el que se describen las opciones de la
vista de Disposición.
• Icono de vista de Disposición
• Icono Dibujar celda de disposición
• Icono Dibujar tabla de disposición
2.- Revise las opciones y luego haga clic en Aceptar para cerrar el cuadro de
diálogo.
3.- En el panel Objetos, debajo de Disposición, observe que las opciones de
Disposición (Dibujar celda de disposición y Dibujar tabla de disposición) están ahora
disponibles; estas opciones no se encuentran disponibles en la vista Estándar.
Dibuje celdas de disposición

En la vista de Disposición, puede dibujar celdas y tablas de disposición para definir
las áreas de diseño de un documento. Esta tarea es más fácil de realizar si prepara
una muestra de la página que está creando antes de comenzar a establecer el
diseño de la página.
Deberá dibujar tablas y celdas tantas como considere necesario. En primer lugar,
deberá dibujar una tabla que se considerará como el contenedor principal,
posteriormente las celdas que ocupará en su diseño
Alcántara 62
Celda de Disposición
Tabla de Disposición o contenedor principal
La tabla de disposición se amplía para llenar toda la ventana de documento y define

el área de disposición de la página. El rectángulo blanco es la celda de disposición
que ha dibujado. Puede colocar celdas de disposición adicionales en el área gris de
la tabla de disposición.
Cambie el tamaño de las celdas de disposición

Para diseñar una página con precisión, puede definir el tamaño de las celdas que
añada al documento. También puede cambiar de sitio las celdas en la página.
1.- Haga clic en el borde de la celda de disposición para seleccionarla.
Aparecerán selectores alrededor de la celda de disposición seleccionada:
2.- Para cambiar el tamaño de esta celda de disposición, lleve a cabo una de estas
operaciones:
• En el inspector de propiedades para la celda de disposición, escriba 510 en el
campo Fijo para definir el ancho de la celda en 510 píxeles y luego haga clic
en el documento para comprobar el cambio de ancho de la celda.
Nota: Si introduce un ancho en píxeles superior al ancho de la tabla de
disposición lo que provoca que la celda se superponga a otra celda de una tabla
de disposición, Dreamweaver le avisará y ajustará el ancho de la celda con un
valor válido.
• En la parte derecha de la celda de disposición, arrastre el selector de cambio
de tamaño situado en medio hacia la derecha hasta que la celda adopte el
ancho deseado. Cuando suelte el ratón, se mostrará el ancho de la celda en
el área de encabezados de columna situada a lo largo de la parte superior de
la tabla de disposición.
Alcántara 63
A continuación añadirá tres celdas de disposición debajo de la celda que ha creado

que acaba de crear. Posteriormente insertará los botones de navegación de la
página en estas celdas.
Alcántara 64
Es muy importante que al crear las celdas dentro de la tabla de disposición

visualicemos el inspector de propiedades para tomar en cuenta las medidas que
estamos destinando para la futura incorporación de objetos.
3.10 Añadir sonido a una página

Hay varios tipos de archivos y formatos de sonido, y varias formas de añadir sonido
a una página Web. Los factores que hay que tener en cuenta antes de optar por un
formato y un método para añadir sonido son: su finalidad, el tipo de usuarios a los
que está destinado, el tamaño de archivo, la calidad de sonido y las diferencias en
los navegadores.
Formatos de archivo de audio

La lista siguiente describe los formatos de archivo de audio más común, junto con
algunas de sus ventajas y desventajas en relación con el diseño Web.
Alcántara 65
El formato .midi o .mid (Interfaz Digital para Instrumentos Musicales) es un formato

de música instrumental. Muchos navegadores reconocen los archivos MIDI y, por
tanto, no requieren un plug-in. Si bien su calidad de sonido es muy alta, puede variar
según la tarjeta de sonido del usuario. Un pequeño archivo MIDI puede proporcionar
un clip de sonido de larga duración. Los archivos MIDI no se pueden grabar y deben
sintetizarse en un ordenador con hardware y software especiales.
Los archivos de formato .wav (Extensión de Formas de Onda) ofrecen una buena
calidad de sonido, son compatibles con muchos navegadores y no requieren un
plug-in. Puede grabar sus propios archivos WAV desde un CD, una cinta, el
micrófono, etc. Sin embargo, el gran tamaño de archivo limita considerablemente la
duración de los clips de sonido que se pueden utilizar en las páginas Web.
El formato .mp3 (Audio del Grupo de Expertos en Imágenes en Movimiento o

MPEG-Audio Nivel-3) es un formato comprimido que reduce considerablemente el
tamaño de los archivos de sonido. La calidad de sonido es excelente: si se graba y
comprime correctamente un archivo MP3, su calidad es equiparable a la de un CD.
La nueva tecnología permite reproducir el archivo en flujo (streaming) de modo que
el visitante no tenga que esperar a que se descargue todo el archivo para
escucharlo. Sin embargo, el tamaño de archivo es mayor que el de Real Audio, por
lo que una canción entera puede tardar bastante en descargarse a través de una
conexión telefónica normal. Para reproducir archivos MP3, los visitantes deberán
descargar e instalar una aplicación auxiliar o un plug-in como QuickTime, Windows
Media Player o RealPlayer.
Establecer un vínculo con archivos de audio

El establecimiento de vínculos con archivos de audio es una forma sencilla y efectiva
de añadir sonido a una página Web. Este método de incorporar archivos de sonido
permite a los visitantes optar por escuchar el archivo, y hace que el archivo esté
disponible para un mayor número de usuarios. Algunos navegadores no admiten los
archivos de sonido incrustados.
Para establecer un vínculo con un archivo de audio:
1.- Seleccione el texto o la imagen que desea usar como vínculo con el archivo de
audio.
2.- En el inspector de propiedades, haga clic en el icono de carpeta para acceder al
archivo de audio o escriba la ruta y el nombre del archivo en el campo Vínculo.
Incrustar audio
Al incrustar audio se incorpora el reproductor de sonido directamente en la página,
pero el sonido sólo se reproduce si los visitantes del sitio disponen del plug-in
adecuado para el archivo de sonido elegido. Incruste archivos si desea utilizar el
sonido como música de fondo o si desea obtener un mayor control sobre la
presentación de sonido. Por ejemplo, puede establecer el volumen, la apariencia del
reproductor en la página y los puntos inicial y final del archivo de sonido.
Para incrustar un archivo de audio:
1.- En la vista de Diseño, sitúe el punto de inserción en el lugar donde desea
incrustar el archivo.
2.- Haga clic en el botón Plug-in del panel Objetos o elija Insertar > Medio > Plug-in.
3.- En el inspector de propiedades, haga clic en el icono de carpeta para acceder al
archivo de audio o escriba la ruta y el nombre del archivo en el campo Vínculo.
Alcántara 66
4.- Especifique el ancho y el alto introduciendo los valores en los campos

correspondientes o cambiando el tamaño del marcador de posición del plug-in en la
ventana de documento.
3.11 Formularios
Los formularios permiten interactuar con los visitantes del sitio o recopilar
información de ellos. Por ejemplo, puede solicitar el nombre y la dirección de correo
electrónico de un usuario o hacer que los visitantes respondan a una encuesta,
firmen en un libro de invitados o proporcionen comentarios acerca del sitio.
Los formularios constan de dos partes: el código HTML que describe el formulario
(por ejemplo, los campos, etiquetas y botones que ve el usuario en la página) y una
secuencia de comandos o aplicación que procesa la información enviada (como un
guión CGI, por ejemplo). No se puede recopilar datos de formulario sin utilizar una
secuencia de comandos de procesamiento.
3.11.1 Objetos de formulario

En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de
formulario. Puede insertar objetos de formulario por medio de la categoría
Formularios del panel Objetos o seleccionando Insertar > Formulario e Insertar >
Objetos de formulario.
• Insertar formulario inserta un formulario en el documento. Dreamweaver

inserta etiquetas form de apertura y cierre de formulario en el código HTML.
Los elementos adicionales del formulario, como los campos de texto o los
botones, deben insertarse entre las etiquetas form para que los datos se
procesen correctamente con todos los navegadores.
• Insertar campo de texto inserta un campo de texto en un formulario. Los

campos de texto aceptan todo tipo de texto, tanto alfabético como numérico.
El texto introducido puede mostrarse como una sola línea, varias líneas o
como viñetas y asteriscos (para protección de la contraseña).
• Insertar botón inserta un botón de texto en un formulario. Los botones llevan a

cabo tareas cuando se hace clic en ellos, como enviar o restablecer
formularios. Puede añadir un nombre o una etiqueta personalizada a un
botón, o bien usar una de las etiquetas predefinidas, Enviar o Restablecer.
Alcántara 67
• Insertar casilla de verificación inserta una casilla de verificación en un

formulario. Las casillas de verificación admiten múltiples respuestas en un
solo grupo de opciones y permiten que los usuarios seleccionen tantas
opciones como sean necesarias.
• Insertar botón de opción inserta un botón de opción en un formulario. Los

botones de opción representan opciones exclusivas de selección. Cuando se
selecciona un botón en un grupo, se anula la selección de los demás botones
del grupo; por ejemplo, los usuarios pueden seleccionar Sí o No.
• Insertar listas/menús permite crear opciones para el usuario en una lista. La

opción Lista muestra los valores de las opciones en una lista de
desplazamiento y permite que los usuarios seleccionen múltiples opciones. La
opción Menú muestra los valores de las opciones en una lista desplegable y
permite que los usuarios seleccionen una sola opción.
• Insertar campo de archivo inserta un cuadro de texto vacío y un botón

Examinar en un documento. Los campos de archivo permiten al usuario
examinar los archivos de sus discos duros y cargarlos como datos de
formulario.
• Insertar campo de imagen permite insertar una imagen en un formulario. Los

campos de imagen pueden usarse en lugar de los botones Enviar para crear
botones Gráficos.
Crear un formulario
Un formulario contiene propiedades que son invisibles para el usuario. Las
propiedades especifican cómo se procesa el formulario
Para añadir un formulario a un documento:

1.- En el documento, coloque el punto de inserción en el lugar en el que desea que
aparezca el formulario y lleve a cabo una de estas operaciones:
• En la categoría Formularios del panel Objetos, seleccione el icono Insertar
formulario.
• Elija Insertar > Formulario.
Cuando se crea un formulario, aparece un contorno de línea de puntos de color rojo
en la ventana de documento. Si no ve el contorno, compruebe que la opción Ver >
Ayudas visuales > Elementos invisibles esté seleccionada.
Alcántara 68
2.- En el documento, haga clic en el contorno para seleccionar el formulario si es que

no está ya seleccionado.
3.- En el campo Nombre del formulario del inspector de propiedades, escriba un
nombre exclusivo para el formulario.
La asignación de nombre al formulario permite hacer referencia a él o controlarlo con
un lenguaje de secuencia de comandos como JavaScript o VBScript.
4.- En el campo Acción, especifique la ruta del URL en el que reside la secuencia de
comandos o la aplicación que procesará el formulario. Para ello, lleve a cabo una de
estas operaciones:
• Haga clic en el icono de la carpeta y acceda a la carpeta correspondiente.
• Escriba la ruta completa de la carpeta.
Si especifica la ruta de una secuencia de comandos CGI, será similar a ésta:
http://www.mysite.com/cgi-bin/process.cgi
5.- En el menú emergente Método, elija el método con el que se gestionarán los
datos del formulario.
• Elija POST para enviar los valores del formulario en el cuerpo de un mensaje.
• Elija GET para adjuntar los valores del formulario al URL y enviar la
información al servidor.
Para un mejor diseño de los objetos dentro del formulario, se puede incluir tablas
para distribuir de una mejor manera todos los elementos que se contendrán en él.
Alcántara 69
Campos de formulario
Una vez insertadas las etiquetas form en el documento, puede comenzar a añadir
objetos de formulario. Los objetos de formulario se utilizan para solicitar información
a los visitantes del sitio.
Utilice campos de formulario cuando desee configurar un formulario para que los
visitantes escriban sus respuestas, como su nombre o dirección, por ejemplo.
Conforme añada un campo a un formulario, podrá ver la longitud del campo, el
número de líneas que contiene, el número de caracteres que puede introducir el
usuario y si se trata de un campo de contraseña.
En la barra de propiedades podemos asignarle un nombre al objeto incluido en el

formulario, esto para poder llevar a cabo algunos eventos, tales como la validación
del llenado del texto.
Alcántara 70
Crear campos de texto

Un campo de texto es un objeto de formulario en el que los usuarios escriben una
respuesta.
Hay tres tipos de campos de texto:
• Los campos de texto de una línea se utilizan para proporcionar respuestas
compuestas por una sola palabra o una frase corta; por ejemplo, un nombre o
una dirección.
• Los campos de texto de varias líneas ofrecen mayor espacio al visitante para
escribir la respuesta. Puede determinar fácilmente el número de caracteres o
el número de líneas que puede introducir el visitante.
• Los campos de contraseña son campos de texto especiales. Cuando el
usuario escribe en ellos, el texto queda oculto y aparecen asteriscos o
viñetas.
Nota: Las contraseñas enviadas a un servidor por este medio no se cifran y, por
tanto, los datos que se transfieren no son seguros.
Insertar una casilla de verificación

Las casillas de verificación permiten que el usuario seleccione más de una opción en
un grupo de opciones.
Cada objeto de formulario casilla de verificación es un elemento individual y debe
tener un nombre exclusivo en el campo Nombre.
Para insertar una casilla de verificación:

Alcántara 71
1.- Coloque el punto de inserción en el interior del contorno y lleve a cabo una de
estas operaciones:
• Elija Insertar > Objeto de formulario> Casilla de verificación.
• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar casilla
de verificación.
2.- En el campo Casilla del inspector de propiedades, escriba un nombre descriptivo
para la casilla de verificación.
Nota: Cada una de las casillas de verificación de un formulario debe tener un
nombre único.
3.- En el campo Valor activado, escriba un valor para la casilla de verificación.
Por ejemplo, en una encuesta, podría establecer el valor 4 para la opción “Estoy
totalmente de acuerdo” y 1 para la respuesta “No estoy de acuerdo”.
4.- En Estado inicial, haga clic en Activado para que la opción aparezca marcada
cuando el formulario se cargue inicialmente en el navegador.
Insertar un botón de opción

Utilice los botones de opción cuando el usuario sólo deba seleccionar una de las
opciones de un grupo de opciones. Generalmente, los botones de opción se utilizan
en grupos. Todos los botones de opción de un grupo deben tener el mismo nombre y
contener distintos valores de campo.
Para insertar botones de opción:
estas operaciones:
• Elija Insertar > Objeto de formulario> Botón de opción.
• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar
botón de opción.
2.- En el campo Botón opción del inspector de propiedades, escriba un nombre
descriptivo para el grupo de opciones.
Nota: Si crea varias grupos de botones de opción en un formulario, asegúrese de
que cada uno de ellos tiene un nombre exclusivo.
3.- En el campo Valor activado, escriba el valor que desea enviar a la aplicación del
lado del servidor o a la secuencia de comandos de procesamiento cuando el usuario
seleccione el botón de opción. Por ejemplo, puede escribir esquiar en el campo
Valor activado para indicar que el usuario ha elegido esquiar.
4.- En Estado inicial, haga clic en Activado para que la opción aparezca marcada
cuando el formulario se cargue inicialmente en el navegador.
Listas y menús
Utilice una lista de opciones o un menú para presentar distintas opciones al usuario
en un espacio limitado. Las listas y los menús de formulario se crean en el mismo
inspector de propiedades, pero proporcionan distinta funcionalidad al usuario.
Utilice una lista cuando desee controlar el número de opciones que se muestran.
Establezca el alto en líneas de la lista; cuando el número de opciones de la lista
supere su alto en líneas, aparecerá una barra de desplazamiento con la que el
usuario podrá ver todas las opciones. También puede permitir que el usuario
seleccione varios elementos de una lista.
Utilice un menú cuando el espacio sea muy reducido. Un menú muestra una sola
línea e incluye una flecha abajo en la que el usuario hace clic para ver las pociones
restantes del menú. El usuario sólo puede seleccionar un elemento de menú de una
sola vez.
Alcántara 72
Botones de formulario
Los botones de formulario controlan las operaciones de los formularios. Puede
utilizar un botón de formulario para enviar los datos introducidos por los usuarios al
servidor o para restablecer un formulario, de forma que los usuarios puedan corregir
la información antes de enviarla. También puede utilizar un botón para llevar a cabo
otro tipo de procesos previamente definidos mediante una secuencia de comandos
de procesamiento. Por ejemplo, un botón de formulario puede calcular el importe
total de un pedido en base a los valores de determinados campos.
Crear botones de formulario de texto

Un botón de formulario de texto es un botón predeterminado que utiliza el estilo
estándar del navegador y que muestra un texto, como Enviar, Restablecer o
Calcular pedido, por ejemplo.
Para crear un botón de texto:

estas operaciones:
• Elija Insertar > Objeto de formulario> Botón.
• En la categoría Formularios del panel Objetos, haga clic en el icono Insertar botón.
2.- En el campo Nombre del botón del inspector de propiedades, escriba un nombre
para el botón.
Nota: Existen dos nombres reservados: Enviar, que envía los datos del formulario
para su procesamiento, y Restablecer, que restablece el valor original de todos los
datos del formulario.
3.- En el campo Etiqueta del inspector de propiedades, escriba el que desee mostrar
en el botón.
4.- En el campo Acción, lleve a cabo una de estas operaciones:
• Seleccione Enviar para enviar el formulario para su procesamiento cuando el
usuario haga clic en el botón.
• Seleccione Restablecer para restablecer el formulario cuando el usuario haga clic
en el botón.
• Seleccione Ninguna para activar otra acción basada en la secuencia de comandos
de procesamiento cuando el usuario haga clic en el botón; por ejemplo, para calcular
un total.
Alcántara 73
Validar formulario
En ocasiones, es necesario validar información que nos ha proporcionado el
visitante a nuestra página, ya sea el nombre, correo o algunos campos que se
consideren como indispensables en el llenado de la encuesta.
Al respecto se agrega un código JavaScript que va a realizar la función de verificar
que las casillas de texto no vayan vacías al momento de darle clic en el botón
Enviar. A continuación se muestra el código, cabe señalar que va antes de que se
cierre la etiqueta </form1> o el nombre que contenga el formulario que se esté
desarrollando.
Alcántara 74
Ejemplo de cómo se ejecutaría en Internet faltando de agregar el campo de correo:

Alcántara 75
Alcántara 76
Unidad 4.- Fireworks
Con este software va a ser necesario que el alumno o lector active su creatividad
para elaborar objetos con la apariencia deseada, en éste curso se tocarán los
aspectos básicos, mismos que serán necesarios para poder ir más allá de lo
aprendido.
4.1 ¿Qué es la creatividad?
Para Rendón Uribe (2007), la creatividad es la capacidad del ser humano que le
sirve para relacionar cosas, que en su experiencia anterior no estaban todavía
relacionadas, realizar algo nuevo y gratificante para sí mismo, y resolver problemas
en una forma original en cualquier campo de su actividad, ejemplo: creatividad
científica, literaria, verbal, artística, práctica, etc.
Hablar de capacidad nos remite al mundo de lo que puede ser, al terreno de la

energía potencial, de las potencialidades. En efecto, la creatividad es como un
músculo, si no se usa se atrofia y la posibilidad de que no se desarrolle y quede en
pura potencialidad aumenta cuando nos regimos por el ritmo de la rutina y la inercia,
cuando nos dejamos vencer por lo establecido y no nos aventuramos a pensar de
una manera diferente.
“La creatividad se manifiesta a veces como el descubrimiento de algo nuevo en un

contexto. El descubrimiento involucra discontinuidad que no es más que un salto no
alcanzable por la vía del pensamiento algorítmico o tradicional. Esta categoría nos
remite al ámbito educativo y valida la posibilidad de plantear el desarrollo de la
capacidad creativa a través de la acción pedagógica, ya que hablar de
descubrimientos no es sólo a nivel social, sino también a nivel personal o individual;
cuando un niño halla una conexión, una relación que antes en su experiencia no
había obtenido, podemos decir, que está navegando en el terreno del
descubrimiento”. Rendón Uribe (2007).
4.2 Aspectos básicos de Fireworks
4.2.1 Área de trabajo

Al entrar a Fireworks nos encontramos con la siguiente pantalla:
Alcántara 77
Pero aún no tenemos un área de trabajo, que en este caso llamamos "lienzo"
(canvas), así que vamos a Archivo > Nuevo, y nos aparece esta ventana, que sirve
para configurar precisamente el área de trabajo:
En ella se nos dan las opciones para determinar el ancho y el alto del lienzo; la
resolución (que en el caso de diseño web, se suele determinar en 72 pixels; y el
sistema de medidas que queremos utilizar: pixels, pulgadas o centímetros. Nosotros
utilizaremos pixeles, por ser el sistema más utilizado en medidas para diseño web.
Alcántara 78
En la misma ventana podemos ver, además, las opciones para determinar el color
que llevará el "lienzo" o área de trabajo. Pero es de notar que, aunque definamos un
color determinado, aún nos da la opción de utilizarlo de color blanco, o transparente.
Una vez definidas las propiedades del lienzo, ya estamos listos para trabajar.
4.2.2 Herramientas
Para empezar, fijémonos que a la izquierda o en algún lugar de la pantalla (según se

le facilite trabajar con la barra de herramientas), encontramos la siguiente "caja de
herramientas":
Esta barra contiene los elementos que

podremos utilizar para la creación de
nuestros documentos. A continuación
daremos una breve explicación de algunas
herramientas.
En el modo de edición de
Herramienta En el modo de objeto
imágenes
Selecciona y mueve Mueve la imagen o los
Puntero
trazados en la pantalla. pixeles agrupados
mediante un recuadro.
Haga doble click en una
imagen para editar los
pixeles que la componen.
Selecciona un objeto Mueve la imagen o los
Seleccionar detrás
situado detrás del objeto pixeles agrupados
seleccionado. mediante un recuadro.
Seleccionar en nivel Selecciona y mueve Mueve la imagen o los
recuadros en la pantalla, pixeles agrupados
inferior
selecciona un objeto de un mediante un recuadro.
Alcántara 79
grupo o un símbolo.
Muestra los puntos de un
trazado y selecciona
puntos.
Recuadro o recuadro Activa el modo de edición Selecciona un área de
de imágenes y selecciona pixeles rectangular o
elíptico
un área de pixeles elíptica.
rectangular o elíptica.
Lazo o lazo poligonal Activa el modo de edición Selecciona o mueve un
de imágenes y selecciona área de pixeles de estilo
un área de pixeles de estilo libre.
libre
Activa el modo de edición Selecciona un área
Varita mágica
de imágenes y selecciona formada por pixeles de
un área formada por pixeles color similar.
de color similar.
Dibuja objetos como Pinta pinceladas de
Línea y formas
trazados que se pueden pixeles en un objeto de
básicas editar. imagen.
Dibuja objetos como Activa el modo objetos y
Pluma
trazados que se pueden dibuja objetos como
editar. trazados que se pueden
editar.
Crea y edita bloques de Activa el modo de
Texto
texto y abre el editor de objetos, crea bloques de
texto. texto, y abre el editor de
texto.
Lápiz Dibuja trazos de lápiz de un Dibuja trazos de lápiz de
pixel como trazados de un pixel.
estilo libre.
Dibuja pinceladas como Pinta pinceladas como
Pincel
trazados. pixeles.
Estira o contrae un trazado Activa el modo de objeto.
Estilo libre
seleccionado para cambiar
la forma del mismo.
Remodela las partes de un Activa el modo de objeto.
Remodelar area
trazado seleccionado que
están incluidas en el cursor
"remodelar área"
Depurador de trazados Modifica las características Activa el modo de objeto.
de presión y velocidad de
un trazado sin modificar su
Alcántara 80
forma.
En el modo de objetos esta En el modo de edición de
Cuchillo/borrador >
herramienta se convierte en imágenes esta
Cuchillo. Corta un trazado herramienta se convierte
seleccionado para crear en Borrador. Borra
varios trazados. pixeles de una imagen.
Activa el modo de edición Duplica partes de un
Sello
de imágenes y duplica objeto de imagen.
partes de un objeto de
imagen.
4.2.3 Herramientas de trazado
Lápiz : es para dibujar a Pincel : La Pluma : Sirve para

mano alzada. El trazo abierto herramienta Pincel realizar trazados segmento
se finaliza normalmente en permite pintar por segmento. Los nodos
cualquier lugar. El trazo pinceladas de estilo resultantes en este trazado,
cerrado, se finaliza en el libre, mientras que la poseen sub-nodos que
mismo lugar donde se herramienta Lápiz ayudan a la modificación en
empezó. A la figura resultante dibuja trazos de lápiz la curva de alguno de esos
se le puede dar relleno. de un píxel. segmentos.
4.3 Creación de texto

El texto de los documentos de Fireworks va incluido en un rectángulo denominado
bloque de texto.
Para introducir texto:
1.- Elija la herramienta Texto.
2.- Haga clic en el lugar del documento donde desea que empiece el
bloque de texto.
Se abre el Editor de texto.
3.- Seleccione el color, la fuente, el tamaño, el espaciado y otras características de
texto.
4.- Escriba el texto. Para introducir un salto de línea, pulse Intro (Windows).
5.- Seleccione el texto en el Editor de texto para asignarle formato después de
escribirlo.
6.- Para ver el texto en el documento a medida que lo escribe en el Editor de texto:
• Elija la opción de aplicación automática en el Editor de texto.
Alcántara 81
Pantalla de edición de texto, donde podrá darle el formato deseado.
4.3.1 Asociación de texto a un trazado

Para quitar al texto las limitaciones de los bloques rectangulares, puede dibujar un
trazado y unirle texto. El texto fluye a lo largo de la forma del trazado y se puede
editar.
Un trazado al que se une texto pierde temporalmente sus atributos de trazo, relleno
y efecto. Todos los atributos de trazo, relleno y efecto se aplican sólo al texto y no al
trazado. Cuando se separa el texto del trazado, éste recupera sus atributos de trazo,
relleno y efectos.
Para colocar texto en un trazado:
1.- Mantenga presionada la tecla Shift mientras selecciona un bloque de texto y un
trazado.
2.- Elija Texto > Unir al trazado.
Para separar el texto del trazado seleccionado:
Elija Texto > Separar del trazado.
Para editar el texto anexo a un trazado:
• Haga doble clic en el objeto de texto-en-trazado para abrir el Editor de texto.
• Elija la herramienta Texto y seleccione el texto que desea editar.
Para cambiar la forma del trazado:
1.- Elija Texto > Separar del trazado.
2.- Edite el trazado.
3.- Después de editar el trazado, vuelva a colocar el texto en el trazado.
Si un texto anexo a un trazado abierto excede la longitud de éste, el texto sobrante
vuelve al principio y repite la forma del trazado.
Alcántara 82
El texto de un trazado vuelve al principio y repite la forma del trazado.
4.4 Uso de la herramienta Pincel

La herramienta Pincel cuenta con varias categorías de trazos: aerógrafo,
pulverizador, caligráfico, ceras o artificial. Dentro de cada categoría hay docenas de
trazos, incluidos rotuladores finos y gruesos, óleos, bambú, hebras, confeti, 3D,
pasta de dientes o pintura viscosa.
Aunque los trazos pueden parecer
pintura o tinta, todos ellos tienen
puntos como cualquier objeto
vectorial. Ello implica que se puede
cambiar la forma de sus trazos
moviendo sus puntos. Tras
remodelar el trazado, su trazo
vuelve a dibujarse.
De esta forma, es posible editar

una pintura entera sin tener que
borrar ni volver a dibujar trazos.
4.4.1 Edición y remodelado de trazados editando los puntos:
Los puntos son la estructura de los objetos de trazado en Fireworks. Cuando se

dibuja en el modo de objetos con cualquier herramienta de dibujo de Fireworks, el
trazado de resultado se definirá por los puntos especificados al dibujar. El tipo de
punto y el aspecto curvo o recto de las líneas adyacentes están relacionados
directamente:
Alcántara 83
- Un punto curvo indica - Un punto de

que los segmentos esquina indica que al
adyacentes son curvos menos uno de los
y se mantienen segmentos
transiciones suaves y adyacentes es una
regulares entre línea recta.
segmentos.
Las dos herramientas más convenientes para realizar la modificación de los trazados
mediante la edición de puntos, son las de Pluma y Nivel inferior .
4.5 Transformación y distorsión de objetos
Las imágenes aparecen seleccionadas por defecto con una delgada línea azul.
Haciendo clic en cualquiera de sus nodos con la herramienta de Selección ,
podemos distorsionar el tamaño, aunque no su forma. Pero si queremos cambiar el
tamaño conservando las proporciones, debemos utilizar la herramienta Escalar .
Al utilizarla, la imagen aparece seleccionada como

muestra la figura. La imagen azul es la original,
mientras que el burde punteado que sobresale,
muestra el aumento de tamaño que se está
ejecutando, pero, nótese, este aumento es de modo
PROPORCIONAL, tanto vertical como
horizontalmente, siempre y cuando los cambios se
hagan pinchando en los nodos de las esquinas.
Otra de las opciones que da la herramienta de

escalar, es la de girar el objeto. Esto se consigue
cuando se coloca el mouse entre dos nodos de la
figura, y el cursor adopta la forma de una curva de
giro.
Un objeto o grupo en modo vector se puede escalar, rotar, reflejar, distorsionar o

inclinar mediante las herramientas Transformar y los comandos de menú.
Herramientas Transformar
Seleccione una herramienta o comando del menú Transformar
para visualizar los selectores de transformación alrededor de
los objetos seleccionados.
Alcántara 84
4.6 Insertar imágenes
1.- Menú Insertar > Imagen.

2.- Seleccionar la imagen que se va a insertar.
3.- OK o Aceptar.
Las imágenes se insertan con su tamaño y peso original.

En caso que las imágenes deban ser insertadas desde un Scanner, es aconsejable
determinar la resolución en 200 dpi, y no en 72, como es común para resolución
web, ya que de esta manera se obtiene inicialmente una imagen de buena calidad,
la que después puede ser optimizada para web.
4.7 Dibujar rectángulos y círculos
Para la creación de botones, tanto en forma de cuadro,

rectángulo o círculo, entre otros, es necesario utilizar la
herramienta rectángulo, las diferentes figuras pueden
ser obtenidas manteniendo oprimido el puntero en la
parte inferior de la herramienta rectángulo (en el
triángulo pequeño).
Alcántara 85
Ejemplo de figuras creadas con la herramienta rectángulo y sus variaciones, en la

primer línea imágenes creadas sin efecto, en la segunda imágenes con efecto Eye
Candy > Bevel Boss… (mismo que se verá más adelante).
Para cambiarle el color al relleno o línea de las figuras o texto se utiliza la

tina que se encuentra en la sección de colores.
4.8 Efectos y cambio de rellenos

Los cambios de relleno permiten crear trazados que combinen características de
solidez, transparencia, trama o degradados, desde colores sólidos hasta otros
degradados que recuerdan el satén, ondas o pliegues. También pueden cambiarse
atributos de relleno, como por ejemplo el color, el borde, la textura o la
transparencia.
4.8.1 Aplicación de bordes biselados

Al aplicar un borde biselado a un botón le proporciona el aspecto de un botón en
relieve. Se puede crear un bisel interior o exterior.
Para aplicar un borde biselado a un objeto seleccionado:
1.- En el panel Efecto, elija la opción Bisel:
• Bisel y Relieve > Bisel interior
• Bisel y Relieve > Bisel exterior
2.- Edite la configuración del efecto en la ventana emergente de edición.
3.- Al finalizar, haga clic fuera de la ventana de edición o pulse enter para cerrarla.
Bisel interior y bisel exterior
4.8.2 Aplicación de efectos de relieve

Utilice el efecto Relieve para que una imagen aparezca elevada o hundida respecto
al fondo. El relieve hace que los botones aparezcan pulsados o no respecto a su
entorno. Se puede aplicar un efecto de relieve hundido o relieve elevado.
Para aplicar un efecto de relieve:
Alcántara 86
1.- Abra el menú emergente Efecto para obtener una lista de los efectos disponibles.
2.- Elija un efecto Relieve:
• Bisel y Relieve > Relieve hundido
• Bisel y Relieve > Relieve elevado
3.- Edite la configuración del efecto en la ventana emergente de edición.
Si desea que aparezca el objeto original, seleccione Mostrar objeto.
Relieve hundido y relieve elevado sobre un lienzo azul
4.8.3 Aplicación de sombras y luces

Fireworks facilita la aplicación de sombras, sombras interiores y luces a objetos. Se
puede especificar el ángulo de la sombra para simular el ángulo de la luz brillando
sobre el objeto.
Efectos de sombra, sombra interior y luz

Para aplicar una sombra o una sombra interior:
1.- Abra el menú emergente Efecto para obtener una lista de los efectos disponibles.
2.- Elija una opción de sombra:
• Sombrear e iluminar > Sombra
• Sombrear e iluminar > Sombra interior
3.- Edite la configuración del efecto en la ventana emergente de edición:
• Arrastre el control deslizante de distancia para definir la distancia de la
sombra respecto al objeto.
• Arrastre el control deslizante de opacidad para definir el porcentaje de
transparencia en la sombra.
• Seleccione Sólo sombra para ocultar el objeto y mostrar sólo la sombra.
Alcántara 87
Para aplicar una luz:

1.- Abra el menú emergente Efecto
para obtener una lista de los efectos
disponibles.
2.- Elija Sombrear e iluminar >
Iluminado.
3.- Edite la configuración del efecto en
la ventana emergente de edición:
• Arrastre el control deslizante
Desplazamiento para indicar la
distancia del resplandor con
respecto al objeto.
• Arrastre el control deslizante de
opacidad para definir el grado
de transparencia del iluminado.
• Seleccione el menú emergente
del cuadro de color para definir el color de iluminado.
4.8.4 Efecto Eye Candy

Dentro de Fireworks se pueden crear efectos de botones o imágenes con apariencia
especial tipo 3-D.
Dibujar un rectángulo en color amarillo, posteriormente elegir dentro de la ventana
efecto la opción Eye Candy 4000 LE > Bevel Boss…
Aparecerá la siguiente pantalla, misma

donde se podrán realizar algunos efectos
especiales, tanto básicos, ver de donde se
enfoca la luz y perfiles adicionales.
Alcántara 88
Configurar el efecto a nuestro gusto y darle aceptar (OK), para que los cambios
tengan efecto sobre el rectángulo previamente dibujado.
El siguiente paso es incluir texto dentro del rectángulo y darle ya sea efectos de
bisel, relieve, iluminado o también bevel boss.
A un objeto se le pueden dar todos los efectos que se deseen

Alcántara 89
Ejemplos de uso del Eye Candy > Bevel Boss, en el primer caso tanto el texto CEU,
así como el botón se le agregaron más efectos, en el caso del monitor solamente el
efecto en cuestión, y por último en la caricatura se uso la opción de varita mágica
para poder quitar el fondo con el que viene la imagen, posteriormente se le
agregaron más efectos.
Si queremos que dos objetos tengan la apariencia de ser uno sólo y así el efecto
aplique a ambos y no de forma independiente, lo que debemos de hacer es crearlos
y posteriormente agruparlos seleccionando ambos objetos clic en el botón derecho
de ratón y elegir agrupar, posteriormente ya podremos darle el efecto deseado.
4.9 Enmascaramiento de imágenes

Las máscaras se agregan a objetos para crear un efecto de corte en los mismos.
Para enmascarar un objeto existente puede utilizarse una máscara vacía u otro
objeto.
Las máscaras son totalmente modificables.
Como objeto de máscara puede utilizarse un objeto vectorial o un objeto de mapa de

bits.
Las máscaras tienen dos funciones principales:
• El trazado de una máscara de vectores puede perfilar otro objeto o imagen.
• Enmascara el objeto o imagen subyacente con su trazado.
Los pixeles de un objeto de máscara pueden afectar a la visibilidad de otro objeto.
La edición de los atributos de trazo y de relleno del objeto de máscara le permitirá

crear muchos efectos únicos.
Alcántara 90
Los pasos para crear una imagen con máscara es la siguiente:

1.- Insertar una imagen
2.- Realizar el objeto que nos servirá como máscara
3.- Cubrir la imagen con el objeto
4.- Seleccionar ambas imágenes
5.- Ir al menú Modificar > Agrupar como máscara
4.10 Creación de rollovers

El Editor de botones permite crear botones que utilicen una única división para lograr
efectos visuales. Sin embargo, en ocasiones es necesario que el comportamiento de
los rollover sea más complejo de lo que permite el Editor de botones. Por ejemplo,
puede desear crear un rollover desunido que muestre una imagen alejada del cursor
o un menú emergente personalizado que aparezca cuando el cursor pase sobre el
gráfico.
Los elementos básicos para la creación de rollovers en Fireworks son los objetos de
división y de zona interactiva y comportamientos arrastrar y colocar. Los
comportamientos arrastrar y colocar permiten crear un efecto de rollover y de
intercambio de imagen que vincula las divisiones y las zonas interactivas con
divisiones destino.
Acerca de los rollovers

Los rollovers de JavaScript son elementos gráficos que cambian de aspecto en un
navegador Web cuando el puntero del ratón se desplaza sobre ellos o se hace clic
en ellos. Incluyen botones e imágenes intercambiadas.
Cualquiera que sea su aspecto, los rollovers siempre funcionan de la misma forma:
un gráfico activa la visualización de otro como respuesta a un clic o al
desplazamiento del puntero sobre ellos. Las imágenes de rollover pueden colocarse
en dos o más fotogramas.
El elemento activador es siempre un objeto Web, es decir, una división o una zona
interactiva. Los objetos Web pueden tener uno o varios comportamientos asociados.
El rollover más sencillo intercambia una imagen en el fotograma 1 con una imagen
que se encuentra justo debajo en el fotograma 2. Puede crear rollovers más
complejos: los rollover de intercambio de imágenes pueden intercambiar una imagen
Alcántara 91
de cualquier fotograma; los rollovers desunidos muestran una imagen en un punto

alejado del cursor.
4.10.1 Rollover Simple

Es posible crear un rollover simple en dos etapas. La primera etapa implica
configurar la división, las dos imágenes que crean el efecto y los fotogramas en los
que residen. Las dos imágenes que conforman el rollover se encuentran en el mismo
espacio del lienzo, pero en fotogramas distintos.
Ejemplo
Para realizar un rollover simple hay que realizar los siguientes pasos:
1.- Crear un rectángulo y darle efectos
2.- Escribir la palabra Nike y darle formato y efectos deseados
3.- Una vez terminado, ir al menú Insertar > Fotograma
4.- Regresar al Fotograma 1 y copiar todo lo que tenemos en él.
5.- Ir al fotograma 2 y pegar el contenido previamente copiado.
6.- Quitar la palabra Nike e insertar el su logotipo.
7.- Regresar al fotograma 1 e insertar una división que abarque el botón creado.
8.- Seleccione la división.
9.- Dé clic derecho sobre el centro de la división, y dentro del menú que aparece,
elija añadir comportamiento de rollover simple.
Podemos darle F12 o presentación preliminar para visualizar el comportamiento que

tendrá el botón al acercarnos, si todo quedó correctamente deberá de aparecer el
logotipo.
Alcántara 92
4.10.2 Uso de comportamientos arrastrar y colocar para crear efectos de

imagen de intercambio
Utilice comportamientos arrastrar y colocar para crear rollovers de intercambio de
imagen. Los comportamientos arrastrar y colocar constituyen un método fácil y
eficaz para especificar lo que sucede a una zona interactiva o división cuando el
puntero pasa sobre estos elementos. Los comportamientos arrastrar y colocar
constituyen un método más rápido ya que permiten crear rollovers arrastrando el
símbolo de comportamiento desde una división de activación o zona interactiva
hasta una división de destino. El símbolo de comportamiento arrastrar y colocar es
un círculo con una cruz ubicado en el centro de la división.
Cuando selecciona un objeto Web de activación, Fireworks muestra todas sus
relaciones de comportamiento. De forma predeterminada, una relación de
comportamiento arrastrar y colocar se representa con una línea azul.
Asociación de comportamientos arrastrar y colocar

La segunda etapa consiste en asociar el comportamiento Intercambiar imagen a la
división.
Para finalizar la creación de la imagen de intercambio mediante comportamientos
arrastrar y colocar:
1.- Seleccione la división que cubre el área de activación.
Nota: Puede seleccionar la división en cualquier fotograma.
2.- Coloque el puntero sobre el símbolo de comportamiento arrastrar y colocar en el
centro del objeto Web.
El puntero cambia a una mano.
3 Haga clic y mantenga pulsado el botón del ratón hasta que el puntero cambie a un
puño.
4.- Arrastre el puño hasta el borde de la división.
Una línea azul de comportamiento arrastrar y colocar describe una trayectoria desde
el centro hasta la esquina superior izquierda de la división.
Aparece el cuadro de diálogo Intercambiar imagen.
5.- En el menú emergente Intercambiar imagen de, seleccione el fotograma en el
que reside la imagen de rollover.
6.- Elija Archivo > Presentación preliminar en el navegador o haga clic en la ficha
Presentación preliminar para ver el rollover tal como aparecerá en un navegador
Ejemplo a desarrollar:
Alcántara 93
Fotograma 1
Fotograma 2
Alcántara 94
Fotograma 3
Para realizar el efecto de rollover simple, hay que estar en el primer fotograma y
darle este comportamiento. Lo nuevo que hay que realizar es aplicar el intercambio
de imagen misma donde se relacionará una división con el fotograma donde se
almacena la información que corresponda.
Fotograma 1
Alcántara 95
Una vez grabado todo el documento, va a ser necesario la exportación del mismo, a
diferencia de una imagen que se exporta en formato gif o jpg, un documento que
contiene divisiones va a ser exportado como documento html.
Elija el menú Archivo > Exportar
Al exportar el archivo se genera un archivo html mismo que utilizará cuando desee
insertarlo en Dreamweaver, además también se graban divisiones que se utilizaron
para llevar a cabo las operaciones de rollover simple así como intercambio de
imagen.
4.11 Creación de animaciones

Las imágenes animadas confieren un aspecto más atractivo y sofisticado a los sitios
Web. En Fireworks pueden crearse animaciones con anuncios en titulares, logotipos
y viñetas en movimiento. Por ejemplo, puede
hacer que la mascota de su empresa se desplace
por la página mientras el logotipo aparece y
desaparece de forma paulatina.
Para generar animaciones en Fireworks se crean
símbolos y se modifican sus propiedades en el
tiempo, lo que crea la ilusión del movimiento. Un
símbolo es como un actor del que se coreografían
los movimientos. La acción de cada símbolo se
almacena en un fotograma. El movimiento se
consigue al reproducir todos los fotogramas en
secuencia.
Alcántara 96
Pueden aplicarse distintas configuraciones al símbolo para cambiar de forma gradual

el contenido de los fotogramas sucesivos. Puede crear un símbolo que atraviese el
lienzo, que aparezca o desaparezca de forma paulatina, que aumente o disminuya
de tamaño, o que gire.
Puesto que un solo archivo puede contener varios símbolos, se pueden crear
animaciones complejas en que sucedan varias acciones a la vez.
La animación no se moverá hasta que el símbolo (o la división que lo rodea) se
optimice con formato GIF Animado. El panel Optimizar permite establecer las
opciones de optimización y exportación para controlar el modo de creación del
archivo. Fireworks puede exportar animaciones en forma de archivos GIF
Animado o Flash SWF.
4.11.1 Acerca de las animaciones

En Fireworks las animaciones se crean mediante la asignación de propiedades a
objetos llamados símbolos de animación. La animación de un símbolo se divide en
fotogramas, que determinan el tiempo que tarda el símbolo en terminar el
movimiento. Una animación puede contener más de un símbolo y cada ellos puede
realizar una acción diferente. Los distintos símbolos pueden número diferente de
fotogramas. La animación termina cuando acaba todos los símbolos.
La creación de una animación en Fireworks es un proceso de cuatro pasos:

1.- Cree un símbolo de animación; puede crearlo de cero o convertir uno existente
en un símbolo.
2.- Utilice el cuadro de diálogo Propiedades de símbolo para introducir los símbolos.
Puede definir el grado y la dirección de movimiento, la escala, (aparición o
desaparición paulatina) y el ángulo y la dirección de rotación.
3.- Utilice los controles Demora de fotogramas en el panel Fotogramas establecer la
velocidad de movimiento de la animación.
4.- Optimice el documento y expórtelo como una Animación GIF.
Las propiedades del símbolo de animación pueden cambiarse en cualquier momento

a través del cuadro de diálogo Animar o desde el panel Objeto. También se pueden
modificar las ilustraciones del símbolo en el editor de símbolos. El editor de símbolos
permite editar el símbolo sin alterar el resto del documento.
También se puede desplazar el trazado de movimiento de un símbolo para cambiar
el movimiento.
4.11.2 Creación de símbolos de animación

Una vez creado un símbolo se pueden establecer propiedades que determinen el
número de fotogramas de la animación y el tipo de acción, como cambio de escala o
rotación. De forma predeterminada, el símbolo de animación nuevo tiene cinco
fotogramas, cada uno con una demora de 0.20 segundos.
Para crear un símbolo de animación:
1.- Elija Insertar > Nuevo símbolo.
2.- En el cuadro de diálogo Propiedades de símbolo, escriba un nombre para el
símbolo nuevo.
Alcántara 97
3.- Elija Animación y haga clic en Aceptar.

4.- En el editor de símbolos, utilice las herramientas de texto o de dibujo para crear
un objeto nuevo.
Se pueden dibujar objetos vectoriales
o de mapa de bits.
5.- Cierre la ventana del editor de
símbolos.
6.- Pueden añadirse fotogramas
nuevos al símbolo con el control
deslizante
Para cambiar las propiedades de un

símbolo:
1.- Seleccione un símbolo.
2.- Elija Modificar > Animar >
Configuración. También puede elegir
Ventana > Objeto para abrir el panel
Objeto.
Cambie cualquiera de las siguientes propiedades:

• Fotogramas es el número de fotogramas que deben incluirse en la animación.
Aunque el control deslizante permite establecer un máximo de 250, en el
cuadro de texto se puede escribir cualquier valor deseado.
• Mover es la distancia en píxeles que debe recorrer cada objeto. El rango de
valores es de 0 a 250 píxeles. El valor predeterminado es 72.
• Dirección es la dirección, en grados, en que debe moverse el objeto. El rango
de valores es de 0 a 360 grados.
• Escala a es el cambio de tamaño, en porcentaje, desde el principio al final. El
rango de valores es de 0 a 250. El valor predeterminado es 100%.
• Opacidad es el grado de aparición o desaparición paulatina de principio a
final.
• El rango de valores es de 0 a 100. El valor predeterminado es 100%.
• Rotar es el giro del símbolo, en grados, de principio a final. El rango de
valores es de 0 a 360 grados. Se pueden introducir valores más altos si se
desea que el símbolo realice más de una rotación. El valor predeterminado es
0 grados.
• Derecha e Izquierda son las direcciones en que rota el objeto. Derecha
equivale al sentido de las agujas del reloj e Izquierda indica el sentido
contrario a las agujas del reloj.
4.11.3 Edición de trazados de movimiento de símbolos

Cuando se selecciona un símbolo de animación, éste cuenta con un recuadro
delimitador y un trazado de movimiento que indica la dirección de desplazamiento
del símbolo.
El punto verde del trazado indica el punto de partida y el rojo el fin del recorrido.
Alcántara 98
Los puntos azules representan los fotogramas. Por ejemplo, un símbolo con cinco
fotogramas debe contar con cinco puntos azules en su trazado. La posición del
objeto en el trazado indica el fotograma actual. Si el objeto aparece como tercer
punto, el fotograma actual es el 3.
Para cambiar la dirección de movimiento se puede modificar el ángulo del trazado.
Para cambiar el movimiento o la dirección:

1.- Arrastre alguno de los puntos de animación del símbolo a una posición nueva.
El punto verde indica el punto de partida y el rojo el fin del recorrido.
Para restringir la dirección de movimiento a incrementos de 45 grados, mantenga
pulsada la tecla Mayús mientras arrastra.
4.11.4 Trabajo con fotogramas

Las animaciones se construyen a partir de la creación de varios fotogramas. El
contenido de cada uno de ellos puede verse en el panel Fotogramas. El panel
Fotogramas permite crear y organizar los fotogramas. Se puede asignar un nombre
a cada fotograma, reorganizarlos, establecer de forma manual los tiempos de
animación y mover objetos de un fotograma a otro.
Configuración de la demora de fotogramas

La demora de fotogramas determina el tiempo durante el que se va a mostrar el
fotograma actual. Se especifica en centésimas de segundo. Por ejemplo, el valor 50
hace que el fotograma se muestre durante medio segundo, mientras que con el valor
300 se muestra durante 3 segundos.
Alcántara 99
Para establecer el valor de demora de fotogramas:

1.- Seleccione uno o varios fotogramas:
• Para seleccionar un rango continuo de fotogramas, mantenga pulsada la tecla
Mayús y haga clic en los nombres del primer y el último fotograma.
• Para seleccionar un rango no continuo de fotogramas, mantenga pulsada la
tecla Control (Windows) y haga clic en cada nombre de fotograma.
2.- Haga clic en el menú emergente Opciones y elija Propiedades, o haga doble clic
en la columna de demora de fotogramas, para abrir el cuadro de diálogo de
propiedades de fotograma.
3.- Introduzca un valor para la demora de fotogramas.
4.- Pulse Intro o haga clic fuera del panel para cerrar el cuadro de diálogo.
4.12 Exportación de la animación

Una vez definidos los símbolos y los fotogramas que conforman la secuencia
animada, ya se puede exportar el archivo como una animación. Antes de exportar
archivos deben configurarse una serie de valores para simplificar la carga de la
animación y facilitar su reproducción. Puede establecer valores de reproducción,
como bucles y transparencias, y utilizar la optimización para reducir el tamaño del
archivo exportado y facilitar su descarga.
Nota: El formato de archivo debe ser GIF Animado (en el panel Optimizar) para
exportar cualquier tipo de movimiento.
Configuración de animación repetida

El valor de bucle, en el cuadro de diálogo Presentación preliminar de la exportación,
determina el número de veces que se repite la animación. Con esta función, los
fotogramas se repiten una y otra vez, lo que permite minimizar el número de ellos
necesario para crear la animación.
Para establecer la repetición de un archivo GIF animado.
1.- Elija Ventana > Fotogramas para abrir el panel Fotogramas.
2.- Haga clic en el botón de bucle, situado en la parte inferior del panel.
3.- Elija el número de repeticiones que deben seguir a la primera.
Si elige 4, por ejemplo, la animación se reproduce cinco veces en total. Con la
opción Siempre la animación se repite de forma continua.
4.13 Presentación preliminar de los ajustes de optimización y

comportamientos
La ventana Presentación preliminar muestra el aspecto de la imagen exportada,
según los ajustes de optimización actuales. Además, puede probar los
comportamientos y rollovers antes de exportar mediante la ventana Presentación
preliminar.
Para una ver una presentación preliminar de una imagen según los ajustes de
optimización actuales:
Haga clic en la ficha Presentación preliminar de la ventana de documento.
Para mostrar u ocultar los objetos de división y guías en una Presentación
preliminar:
Haga clic en el botón Mostrar (u Ocultar) zonas interactivas y divisiones del panel
Herramientas.
Alcántara 100
Presentación preliminar de botones y rollovers

Mueva el puntero sobre el rollover o botón en la ventana Presentación preliminar
para ver como aparecerá en un navegador Web.
Nota: Debe estar viendo el Fotograma 1 para ver los botones o rollovers. Para
cambiar al Fotograma 1, haga clic en el panel Fotogramas.
Elección del formato JPEG
JPEG es un formato desarrollado por el Joint

Photographic Experts Group específicamente para
imágenes fotográficas. El formato JPEG admite
millones de colores (24 bits), en cambio, el
formato GIF sólo admite 256 colores. JPEG
siempre produce una calidad más alta para los
datos de imágenes fotográficas.
JPEG es un formato en el que se descartan
algunos datos durante la compresión de archivos, lo que reduce la calidad del
archivo final. Sin embargo, el hecho de descartar datos es aceptable cuando no se
observa una reducción evidente de la calidad.
Cuando desee exportar un archivo JPEG, utilice el deslizador emergente Calidad del
panel Optimizar para determinar la merma de calidad que se producirá después de
comprimir el archivo.
• Utilice un porcentaje alto para preservar la calidad de la imagen y aplicar
menos compresión, como resultado, obtendrá archivos de mayor tamaño.
• Utilice un porcentaje bajo para producir un archivo pequeño, aunque con
menor calidad de imagen.
Utilice las presentaciones preliminares 2-arriba y 4-arriba para probar y comparar el

aspecto y tamaño previsto del archivo con distintos valores de calidad para un
archivo JPEG exportado.
JPEG es el formato óptimo para fotografías digitalizadas, imágenes que utilizan
texturas, imágenes con transiciones de color en degradado o cualquier imagen que
precise más de 256 colores.
Elección del formato PNG

PNG, o Portable Network Graphic, es el formato de gráfico web más versátil. Sin
embargo, no todos los exploradores web pueden beneficiarse completamente de las
ventajas del formato PNG sin utilizar un plug-in. Por tanto, no es un formato de
archivo común para la Web.
El formato PNG es adecuado para la creación de complejas transparencias activas,

gráficos con colores de alta densidad y gráficos de con colores reducidos y
altamente comprimidos.
PNG es el formato de archivo nativo de Fireworks. Sin embargo, los archivos PNG
de Fireworks contienen información adicional que no se guarda al exportar un
archivo PNG para utilizarlo en la Web.
Alcántara 101
4.14 Exportación
Después de crear gráficos en Fireworks, es posible optimizarlos y exportarlos a los
formatos más comunes de la Web y a los formatos de las aplicaciones de gráficos
vectoriales. Los ajustes de exportación y optimización no cambian el documento
original de Fireworks.
Antes de exportar para la Web, puede optimizar el archivo que desee exportar.
Si desea optimizar como parte del proceso de exportación, el cuadro de diálogo
Presentación preliminar de la exportación ofrece todas las opciones de optimización,
excepto la compresión JPEG selectivo. La presentación preliminar de la exportación
muestra cualquier cambio que realice con lo que puede ver cómo los cambios
afectan a la calidad y el tamaño de la imagen.
Si no está familiarizado con la optimización ni con la exportación de gráficos Web,

utilice el sistente de exportación. Este asistente le guía en todo el proceso de
exportación y le sugiere diferentes ajustes. Puede exportar gráficos a otras
aplicaciones de gráficos vectoriales como Macromedia FreeHand y Flash, y Adobe
Illustrator y Photoshop. Además, puede copiar y pegar los trazados Fireworks en
aplicaciones de vectores.
También podemos exportar imágenes jpg ya sea en el mismo formato o en otro, esto
con la finalidad de sacrificar un poco la calidad, pero salvando el espacio o tamaño
de la imagen para poder presentarla en Internet de manera rápida y que no tarde
demasiado en descargarse.
Alcántara 102
Alcántara 103
UNIDAD 5.- Relación Dreamweaver y Fireworks

Como se vio, Dreamweaver lo utilizamos para ir insertando imágenes y darle el
diseño o apariencia deseada a nuestra página, en Fireworks podemos diseñar texto,
imágenes, imágenes interactivas, botones, etc., todo con efectos que podemos crear
con la ayuda de la aplicación, ahora lo que falta es la integración hacia
Dreamweaver.
Para insertar una imagen que hemos realizado en Fireworks y se haya exportado a
uno de los formatos gráficos, hay que elegir el botón de insertar imagen, aparecerá
una ventana donde nos indicará que seleccionemos la imagen, misma que puede
ser una imagen estática o un gif animado.
Cuando se quiere importar algún archivo de Fireworks donde se hayan realizado

divisiones e intercambio de imagen, hay que elegir el botón Insertar HTML de
Fireworks.
Alcántara 104
Le damos clic en examinar y localizamos el archivo a insertar.
Igual se realiza para insertar botones que contengan rollover simple para que
cambie la apariencia cuando el usuario se acerque al botón.
Todo lo anterior se puede realizar mediante los diseños vistos en Dreamweaver, ya

sea en Marcos o Vista de Disposición donde asignamos las celdas para insertar
objetos.
Lo que sigue….
Depende del lector.
A Diseñar Páginas Web con calidad.
Alcántara 105
Referencias
Area Moreira Manuel.- ¿Que es una Webquest?.-
http://webpages.ull.es/users/manarea/webquest/ obtenido el 25 de noviembre del
2007
Cañas José y otros.- Imagen: Actividades Cognitivas. El Factor Humano,

Universidad de Granada. http://www.ugr.es/ obtenido el 20 de diciembre del 2007
Crea tu Web, Pasos para crear tu sitio web.-

http://creatuweb.espaciolatino.com/guia/preliminar.htm obtenido el 20 de diciembre
del 2007 obtenido el 28 de agosto del 2007
E-Magister.com, Guía básica del Lenguaje HTML.-

http://www.emagister.com/disenador-programador-web-cursos-2330906.htm,
obtenido el 20 de diciembre del 2007
Hartson Rex, Professor; Ph.D., Ohio State, Usability Methods & Tools.-
http://research.cs.vt.edu/usability/index.html, obtenido el 20 de diciembre del 2007
Imágenes obtenidas el 15 julio de 2007
Computadoras.- http://www.lanix.com/
Monitor.- http://blog.pc-actual.com/2006/10/el_monitor_ lcd_mas_rapido_del
.html
Notepad.- http://www.ucc.vt.edu/lynch/TRActionPlan2.htm
Página.- http://www.multimediosbariloche.com/sitios.php
Planificar sitio.- http://usuarios.lycos.es/fisikito/mapa%20del%20sitio.htm
Servidor.- http://www.haydetodo.com/product_info.php/products_id/431
URL.- http://www.sctnl.net/obra07/menu_fed000.htm
Macromedia Inc., Utilización de Dreamweaver, Noviembre 2000, Manual de

Macromedia.
MailxMail, Cursos Gratuitios.-

http://www.mailxmail.com/curso/informatica/frontpage/capitulo1.htm, obtenido el 15
de enero del 2008
Patxi Iriondo Alberdi. Creación de páginas web con Frontpage 2000

http://www.aula21.net/segunda/recursosweb.htm, obtenido el 15 de enero del 2008
Rendón Uribe María Alejandra, ¿Qué es la creatividad?

http://www.mailxmail.com/curso/vida/estimulacioncreatividadinfantil, obtenido el 15
de enero del 2008

Manual v015

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual v015

Hochgeladen von

Copyright:

Verfügbare Formate

Alcántara 1

2. Etiquetas HTML ......................................................................................................... 14

2.4.2 Dando Formato al Texto del Documento. ............................................. 19

3.6 Importar datos desde Excel............................................................................. 51

4.10.2 Uso de comportamientos arrastrar y colocar para crear efectos de

Drawing by Feza Balci en: Usability Methods & Tools http://research.cs.vt.edu/usability/index.html

Unidad 1.- Conceptos Básicos

1.1 ¿Qué es una página web?

• Para el “navegante o internauta” una página web es una pantalla en su

• Para el diseñador una página web, es un documento que desarrolla para

con la extensión .htm o .html. Una serie de páginas web interconectas e

Requisitos para realizar un sitio web

1.2.1 Lenguaje HTML

El lenguaje HTML es la base estructural en la que están diseñadas las páginas de la

1.2.2 El lenguaje JavaScript

JavaScript es un lenguaje de scripts o líneas de código que se puede agregar al

JavaScript permite la realización de aplicaciones de propósito general a través de la

Por ejemplo, una aplicación escrita en JavaScript puede ser incrustada en un

¿Debería tener mi propio dominio?

Tener un sitio web en 'paginas.sitios-gratis.com/mi-empresa/' da una imagen

Tener un dominio del tipo 'abogados-mexico.com' te da la opción de que desde otras

Además, si quieres aparecer en los resultados de Google referentes a un

1.4 ¿Cómo publicar un sitio Web?

Para enviar archivos hacia un servidor, es recomendable usar un programa cliente

Con el software FTP será posible la actualización y mantenimiento de la Web.

1.5 Acceso a la página web

El servidor de páginas web se encarga de “servir” las páginas HTML mediante el

Ejemplo de una trayectoria para acceder a un archivo en especial o localización del

Proceso de solicitud de una página y su posterior visualización en el monitor.

1.6 Cómo planificar el sitio web

El primer paso es: “Apagar la Computadora”

• ¿Qué quiero publicar?

vamos a obtener y qué aspecto externo le vamos a dar. Un minucioso trabajo de

A. Definir la audiencia destino: al crear una web desearemos que comunique

En función de la audiencia destino el diseño de la web será diferente. Por ejemplo, si

En una web docente la audiencia destino serán alumnos y profesores de una

En una web docente incluiremos materiales escritos (apuntes, exámenes,

Ejemplo de un mapa de sitio para una página de docentes.

Para ayudarnos a visualizar la estructura de directorios es recomendable dibujar una

En una web docente se suelen emplear directorios como programación de la

Ejemplo de estructurar directorios, subdirectorios y archivos.

E. Crear un guión: es el momento de hacer un boceto de la página principal y de

• Espacio y equilibrio: cantidad de espacio que los elementos de la página

1.7 Reglas básicas en el diseño

• Colocar un título corto, descriptivo y preciso.

1.7.1 Lo Visual en el Proceso Creativo

El proceso de composición es el paso más importante en la resolución del problema

No existen reglas absolutas sino cierto grado de comprensión de lo que ocurrirá en

1.7.2 Estilo Visual

El estilo es la síntesis visual de los elementos, las técnicas, la sintaxis, la incitación,

Tenemos también el propósito, la razón por la que algo se hace: para la

La elección visual presenta una serie de opciones: la búsqueda de decisiones

La política, la economía, el entorno y los esquemas sociales crean juntos una

1.8 Formatos gráficos

1.8.1 ¿Qué son los formatos gráficos?

Con respecto a la estructura, la mayoría posee un header que indica al programa

1.8.2 Formatos vectoriales

1.8.3 Formatos bitmap

1.8.4 Los formatos gráficos en Web: GIF y JPG

• Salvo para grandes gráficos o fotografías, emplearemos el formato GIF para

• Modificar las imágenes, dotándolas de fondos transparentes

1.9 El texto en las páginas

Unidad 2.- Etiquetas HTML

La información en la Red necesita viajar de una manera rápida y precisa, para lo