Manual Alumno Diseño Sitios

qwertyuiopasdfghjklzxcvbnmqwertyui
opasdfghjklzxcvbnmqwertyuiopasdfgh
jklzxcvbnmqwertyuiopasdfghjklzxcvb
PREPARATORIA POLITECNICA SANTA CATARINA
ACADEMIA DE INFORMÁTICA Y ESPECIALIDADES TÉCNICAS

nmqwertyuiopasdfghjklzxcvbnmqwer
DISEÑO DE SITIOS WEB

tyuiopasdfghjklzxcvbnmqwertyuiopas
dfghjklzxcvbnmqwertyuiopasdfghjklzx
cvbnmqwertyuiopasdfghjklzxcvbnmq

Manual del Alumno
wertyuiopasdfghjklzxcvbnmqwertyuio

pasdfghjklzxcvbnmqwertyuiopasdfghj
klzxcvbnmqwertyuiopasdfghjklzxcvbn
mqwertyuiopasdfghjklzxcvbnmqwerty
uiopasdfghjklzxcvbnmqwertyuiopasdf
ghjklzxcvbnmqwertyuiopasdfghjklzxc
vbnmqwertyuiopasdfghjklzxcvbnmrty
uiopasdfghjklzxcvbnmqwertyuiopasdf
ghjklzxcvbnmqwertyuiopasdfghjklzxc
vbnmqwertyuiopasdfghjklzxcvbnmqw
ertyuiopasdfghjklzxcvbnmqwertyuiop


Manual del Alumno

TEMA 1. PASOS PARA LA PLANEACIÓN DE UN SITIO WEB.
Entender un sito web es un proceso complejo. A veces involucra un gran número de personas trabajando en
diferentes roles para asegurarse de que el sitio contenga la información apropiada, se vea bien y sea funcional. La
planeación es el procedimiento más importante para que la creación de un sitio web se lleve a cabo con éxito.

Pasos para la planeación

Paso 1. Lista de Control para obtener Información del Sitio.
Es muy importante obtener información acerca de la compañía a quien se le desarrollará el sitio y de las personas
que se espera visiten el mismo. Recopilar esta información puede requerir algo de investigación; hablando con
personal de la empresa, buscando en revistas, etc. Alguna otra información requerirá de creatividad y trabajo. El
resultado de esta investigación aportará valiosos datos para diseñar un sitio totalmente orientado a las
necesidades de la empresa, y sus posibles clientes o proveedores. Los elementos más relevantes de la lista de
control son:
Lista de Control para la Información del Sitio
1 Objetivo del sitio (ver ejemplo 1)
2 Misión de la empresa (ver ejemplo 2)
3 Nombre y logo de la compañía
4 Dirección, teléfono(s), email y fax de la compañía – comunicación vía e-mail
5 Datos del contacto en la empresa – Nombre, teléfono, e-mail
6 Año de Inicio de Operaciones
7 Número de Empleados
8 Menciona los productos y/o servicios (5 al menos)
9 Fotografías (Empresa, productos, procesos, etc.)
10 Contenido del Sitio - lluvia de ideas, con el objetivo de pensar en todos los elementos que
contendrá el sitio, tales como información, fotos, gráficas, calendarios, ligas, etc. (Ver ejemplo 3)

Ejemplo 1. Objetivo del Sitio
Contar con una herramienta efectiva y baja en costo que dé a conocer al público en general la empresa o
institución, los productos y servicios que ofrezco para así incrementar mis ventas locales y ser accesible
globalmente.

Ejemplo 2. Misión de la Empresa

dw-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9
2/2


Manual del Alumno

Ejemplo 3. Pensar en el contenido del sitio web
Consiste en llevar a cabo una sesión de lluvia de ideas, con el objetivo de pensar en todos los elementos, tales
como información, fotos, gráficas, calendarios, ligas, etc. que se deben incluir dentro del sitio Web pensando no
Web,
sólo en la publicación del sitio sino en su mantenimiento (actualización). Posteriormente se evaluará cada
idea.

Ejemplo.

Sitio Web del Gobierno de Nuevo León Sitio Web de Chiquitín-Yogurt para niños

• Calendario de eventos del gobierno • Ligas a otros sitios
• Directorio telefónico de las diferentes • Manejo de juegos donde con solo hacer clic
Secretarías en la imagen pueden iniciar el juego
• Ligas hacia las diferentes dependencias • Una sección en la que los niños puedan
como el DIF, turismo, etc. saber más sobre los animales, ciudades,
• Respuesta a las preguntas más frecuentes etc.
• Etc. • Etc.

Paso 2. Diseñar la interfaz para la interacción humano-computadora (Maqueta).
Consiste en definir el diseño global, los colores, tipo, tamaño y color de texto, los gráficos de cada una de las
páginas del sitio Web. Se recomienda cuidar siempre el tamaño del archivo de cada página. Una página con
muchos elementos gráficos puede tomar mucho tiempo en cargar. Como apoyo, se pueden visitar otros sitios
Web.

Ejemplo de la compañía Chiquitín.
• Las imágenes y textos tendrán movimiento Diseño de la página principal
o animación.
• Se utilizarán colores que llamen la atención
a los usuarios.
• Se hará mucho uso de imágenes para que
el usuario tenga una navegación más fácil
por el sitio.
• Se manejarán las siguientes páginas:
a) divertichicos.html
Tiene las opciones principales del sitio
b) quienes_somos.html
Contiene la información general del sitio, la
misión, información del web master, etc.
c) juegos.html
Contiene la lista de los juegos que se
pueden manejar en el sitio
d) tareas.html .
Contiene las ligas o vínculos a diferentes
páginas de enciclopedias infantiles

Ejemplo de otros sitios

http://www.kokone.com

http://www.biblioninos.cl/
-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9
3/3


Manual del Alumno

El diseño del sitio toma en consideración las necesidades de los usuarios potenciales del mismo. Abajo, se puede
observar la diferencia entre el diseño requerido para un sitio que será utilizado por adultos y uno para niños, en
términos de color, imágenes, colores, letras, etc.

Personas mayores de 10 años interesadas en obtener información Niños y amas de casa interesados en el producto o en información
acerca del estado de Nuevo León o en hacer algún trámite nutrimental.
gubernamental.

Paso 3. Diseñar la Estructura de Navegación o Mapa del sitio.
Consiste en tomar en cuenta el contenido de las páginas para organizar la forma en que se navegará dentro del
sitio Web; mediante un diagrama u organigrama.

La Página de Inicio, también conocida como “Home Page” o “Index Page”, aparece en la parte superior del mapa.
Al “Home Page” también se le llama “página madre”, porque es la más alta en los niveles del organigrama y tiene
páginas ligadas a ella. Las páginas ligadas al “home page” se llaman “páginas secundarias”.

El Mapa del Sitio mostrará la Página de Inicio y la ligas con las páginas secundarias; puede ser dibujada a mano
como se muestra a continuación:

-mc1.0-Politécnica-manual-del-alumno-03Ago-Ot09.doc9
4/4


Manual del Alumno

Ejemplo.
Mapa visto en Dreamweaver Mapa creado por el diseñador

Paso 4. Relación de Actividades y Responsables.
Consiste en crear una lista de todas las actividades y tareas que se deberán llevar a cabo para la realización del
sitio Web, así como también asignar un responsable y fecha límite para llevar a cabo la tarea.
Datos requeridos: Descripción de la Tarea - Fecha Límite - Responsable

Ejemplo y Formato sugerido
Descripción de la Tarea Fecha Límite Responsable
Seleccionar el proyecto final autorizado por el maestro 30 Enero Todos
Mario Garza
Recolectar y organizar la papelería necesaria para el sitio 6 de febrero
Lucía De la Rosa
Hacer las animaciones en Flash 15 de abril Todos
Tomar fotos de la empresa 7 de febrero Esteban Benavides

Paso 5. Elaboración del Sitio Web.
En este paso se utiliza el mapa del sitio para crear la página Index y sus páginas web secundarias. Una vez
creadas las páginas se incluyen los colores, logo, texto, tablas, imágenes, etc. necesarias en el desarrollo del sitio.

Paso 6. Probar y modificar las páginas.
Una vez que se terminen de crear todas las páginas, es necesario probar el sitio para cerciorarse de que todo el
trabajo esté bien hecho. Es importante probar las páginas usando diferente software. Los dos browsers o
navegadores más comunes son Microsoft Internet Explorer y Netscape Navigator.

Una vez publicado el sitio web, se necesitará mantenerlo actualizado; es decir, modificarlo cada vez que se realiza
un cambio, como por ejemplo, insertar un botón nuevo del gráfico a una página. Involucra revisar o hacer pruebas
en el sitio otra vez. Probar y modificar las páginas de un sitio Web es un proceso continuo.

5/5


Manual del Alumno

TEMA 2. VENTANA DE LA APLICACIÓN DREAMWEAVER.

6/6


Manual del Alumno

TEMA 3. CREACION DE UN SITIO Y SUS PÁGINAS.
Al formar los nombres de carpetas y de archivos es recomendable tomar en cuenta lo siguiente:
1. Sólo letras minúsculas.
2. Sin acentos.
3. Sin caracteres especiales.
4. Sin espacios.
5. Para separar texto utilizar solamente el guión o el guión bajo.

Para crear un sitio es necesario definir 3 elementos:
1. El nombre del sitio.
2. La carpeta raíz. Para almacenar todos los archivos que componen el sitio como: páginas web, imágenes,
animaciones, videos o cualquier archivo que se necesite en el desarrollo del sitio.
3. La carpeta de imágenes por default (debe estar dentro de la carpeta raíz).

Pasos para crear un sitio en Dreamweaver.
1. Seleccionar Site del menú principal y luego la opción New Site.
2. Seleccionar la pestaña Advanced.
3. Escribir el nombre del sitio (Ej: “Site Example”).
4. Carpeta raíz: Teclear o buscar la ruta de la carpeta raíz en donde se guardará el sitio. Si se utiliza el
buscador, asegurarse que en donde dice “Select:” esté seleccionado el nombre de la carpeta raíz. La
carpeta raíz se puede crear en este mismo paso.
5. Carpeta de imágenes: Da clic en el folder amarillo, busca la carpeta raíz y crea una nueva carpeta
llamada “images”.
6. Da un clic en Save (esquina inferior derecha de la pantalla).
7. Da un clic a OK en la esquina inferior derecha de la pantalla “site definition” (definición del sitio).

Dreamweaver habrá creado el nuevo sitio, y éste aparecerá en el panel de archivos. Asegurar que la carpeta de
imágenes se encuentre DENTRO de la carpeta raíz o el sitio no funcionará adecuadamente.

Si se requiere hacer cambios a la definición del sitio.
Menú Principal > Site > Manage Sites > Edit.

Pasos para crear páginas nuevas en un sitio.
1. En el Panel de Archivos, presionar el botón derecho del ratón sobre el nombre del sitio.
2. Seleccionar New File.
3. Modificar “untitled” por el nombre de la página. Asegurarse de no quitar la extensión “.html”, o en su caso
agregarla.
4. Teclear enter.
5. Dar un doble clic en el nombre de la página para abrirla y editarla.

Nombre de la página principal del sitio.
1. El nombre es conveniente que sea “index.html”, para que al publicar el sitio en Internet, el servidor la
reconozca.
2. Si se le pone otro nombre, en el panel de archivos, presionar el botón derecho sobre su nombre y
seleccionar “Set as Homepage”. Es recomendable que siempre se establezca la página Index como
“HomePage”
7/7


Manual del Alumno

Título de la página.
1. Es necesario ponerle título a cada una de las páginas, en la caja Title de la Barra de Herramientas del
Documento.
2. Este título aparece en la barra azul de navegación al correr el sitio en Internet.
Nota. Se debe grabar constantemente los cambios hechos a las páginas para no perder el trabajo.

Exportar el sitio.
Para que el sitio generado se pueda abrir en cualquier computadora es necesario exportarlo. Esto hará que se
genere un archivo con la extensión .STE file.
1. Utilizar Menú Site/Manage Sites/Export.
2. Seleccionar la carpeta raíz.
3. Save.
4. Done.

Nota. Sólo si durante el desarrollo del sitio, se hacen cambios a alguno de los 3 elementos para definir un sitio
(nombre del sitio, carpeta raíz y carpeta de imágenes) será necesario volver a exportarlo.

Importar el sitio
Para importar un sitio que ya se generó anteriormente en otra computadora.
1. Utilizar Menú Site/Manage Sites/Import.
2. Buscar dentro de la carpeta raíz, el archivo exportado anteriormente (.STE file).
3. Open.
4. Done.

8/8


Manual del Alumno

TEMA 4. TEXTO.
El texto se agrega a la página y se le aplica formato de texto de acuerdo al inspector de propiedades y a las
propiedades de la página, como se muestra a continuación.

9/9


Manual del Alumno

TEMA 5. IMÁGENES.
Para insertar una imagen (sólo archivos .jpg)
1. Grabar la imagen en la carpeta imágenes de la carpeta raíz.
2. Posicionarse en el lugar donde se desea insertar la imagen.
3. Menú Insert/Image.
4. Seleccionar la imagen de la carpeta imagenes.
5. Escribir un texto alterno (texto que da información de la imagen o de la liga asignada).
6. Dar clic en OK.
O bien
1. Arrastrar la imagen del Panel de archivos al lugar donde se desea insertar.

Es conveniente optimizar el uso de una imagen en Dreamweaver para que sea más rápido y funcional ver el
sitio en Internet Explorer.

Los 3 pasos para optimizar el uso de una imagen en Dreamweaver son:
I. Recortar la imagen. Dejar sólo la parte que nos interesa de la imagen.
II. Modificar el tamaño visual de la imagen. Darle el ancho y el alto que se necesita.
III. Optimizar el espacio en disco que ocupa la imagen. Es aconsejable que mida menos de 50 kb.

NOTA. Antes de optimizar las imágenes es conveniente grabar un respaldo de las imágenes ya que al recortarlas y
al optimizar su espacio, se hará directamente sobre el archivo de la imagen y si hay un error no se podrá regresar
a su estado original.

Es necesario identificar en el inspector de propiedades, los siguientes puntos:

a. Espacio en disco ocupado por la imagen Ej: 144k
b. Ancho de la imagen Ej. W 269
c. Alto de la imagen Ej: H 188
d. Botón Crop
e. Botón Optimize in Fireworks

10/10


Manual del Alumno

I. Recortar una imagen (sólo se puede en forma de cuadro). Se reduce el espacio ocupado en disco.

Si la imagen está muy grande, bajar el % del zoom en la barra de
estado, para poder manejar la imagen.

a. Seleccionar la imagen.
b. Clic al botón crop del Inspector de Propiedades.
c. Clic al botón OK, para confirmar que el cambio se hará
directamente en el archivo.
d. Ajustar el cuadro sobrepuesto para seleccionar sólo la parte
que se desea de la imagen.
e. Dar doble clic sobre el cuadro sobrepuesto.

II. Modificar el tamaño visual de la imagen. No se reduce el espacio ocupado en disco.

Hay 3 maneras, pero sólo el tercer método asegura que no se distorsione la
imagen.

1. Seleccionar la imagen y modificar directamente el ancho y el alto
de la imagen (W, H) en el inspector de propiedades.
2. Arrastrar cualquiera de los puntos de control.
3. Teclar <shift> y al mismo tiempo arrastrar el punto de control
inferior derecho.

11/11


Manual del Alumno

III. Optimizar el espacio en disco que ocupa la imagen. Se reduce el espacio ocupado en disco. (Sólo para
archivos .jpg)
a. Seleccionar la imagen.
b. Clic al botón Optimize de Fireworks del Inspector de Propiedades
c. Clic al botón Utilizar este archivo, para confirmar que el cambio se hará directamente en el archivo.
d. Modificar directamente la calidad. Poner un máximo de 80 y un mínimo de 66. Entre menor sea la
calidad menor será el espacio que ocupe en disco. Observar cómo cambia el indicador de kb.
e. Clic al botón Actualizar (OK).

En este ejemplo la calidad de la imagen es de 80 y el espacio en disco es de 13.97 kb.

12/12


Manual del Alumno

TEMA 6. LIGAS, ANCLAS, Y HOTSPOTS.
1. Una liga es un hipervínculo, que al dar clic sobre él, permite viajar de la página actual a:
a. otra página del mismo sitio.
b. un punto específico (ancla), dentro de la página actual, o dentro de otra página del mismo sitio.
o
c. a otro sitio web (www...)
d. a una dirección de correo electrónico.
e. a una imagen.

2. La liga se puede poner en:
a. Un texto.
b. Una imagen.
c. Parte de una imagen (hotspot). Este punto se va a ver más adelante,

3. Insertar un ancla.
a. Posicionarse en el lugar donde se desea el ancla.
b. Menú Insert/Named Anchor (o dar clic sobre el ícono del ancla en la barra de insertar).
c. Escribir el nombre del ancla.

4. Liga a una dirección de correo.
a. Seleccionar el texto.
b. Menú Insert/E-Mail Link.
c. Escribir la dirección del correo electrónico en el cuadro E-MAIL.
d. Presionar la tecla Ok.
5. Insertar una liga.
e. Seleccionar el texto, la imagen o el hotspot.
f. Escribir en el apartado link del Inspector de propiedades, el vínculo deseado.
g. Presionar la tecla enter.

Tipos de ligas.
Enlazar a: Link del inspector de Ejemplo del link
propiedades
Otra página del mismo sitio <nombre de la pagina>.html pagina2.html

Un ancla dentro de la página #<nombre del ancla> #inicio
actual
Un ancla dentro de otra página <nombre de la pagina>#<nombre papel.html#ventajas
del mismo sitio del ancla>
Otro sitio web http://<direccion web> http://www.google.com.mx

Dirección de correo electrónico mailto:<direccion de correo mailto:mgonzalez@gmail.com
electrónico>
Una imagen <carpeta de imágenes>/<nombre imagenes/piramide-
de la imagen> nutricional

13/13


Manual del Alumno

6. La ventana en la que se abrirá el vínculo elegido se especifica en el apartado target del inspector de
propiedades.
Propósito Target del inspector de propiedades
Abrir una ventana nueva en el navegador. _blank
En la ventana actual _self (es la opción predeterminada)

HOTSPOTS. Un HOTSPOT es la selección de una parte de una imagen para asignar una liga o vínculo a otra
pagina, ancla, sitio, etc.; el Hotspot se puede visualizar como un área azul transparente sobre la imagen.

Se utiliza estas herramientas para seleccionar el área del vínculo. El área del vínculo puede ser un rectángulo, una
elipse o un polígono.

14/14


Manual del Alumno

En el caso de un polígono se usa la última de las herramientas de la parte superior y aplicando una serie de clics
que rodeen la parte de la imagen con la que se desea vincular a otra página. En el siguiente ejemplo se puede ver
el uso de los tipos de HotSpots.

1.- Seleccionar el tipo de HotSpot, por ejemplo el polígono.
2.- El polígono requiere utilizar el mouse para encerrar la oreja del conejo.
3.- Asignar la liga a la página, sitio, etc., en este ejemplo a la página orejas.html

2

3

1

15/15


Manual del Alumno

TEMA 7. TABLAS SENCILLAS
Insertar una tabla (Insert/Table)
a) Rows (Núm. de renglones).
b) Columns (Núm. de columnas).
c) Table width – pixels / Percent (Ancho de la tabla en Pixeles o en porcentaje)
d) Cell padding (espacio que hay entre el contenido de la celda y el borde de la
misma).
e) Cell spacing (espacio entre las celdas).
f) Border thickness (Ancho del borde en pixeles).

Seleccionar algún elemento de la tabla.
1) Seleccionar una tabla. Clic dentro de la tabla y clic en el selector de etiqueta table.
2) Seleccionar un renglón. Clic dentro de la tabla y clic en el selector de etiqueta tr.
3) Seleccionar una columna. Clic en el borde superior de la columna.
4) Seleccionar una celda. Clic dentro de la celda y clic en el selector de etiquetas td.
5) Seleccionar un conjunto de celdas. Clic dentro de la primera celda y arrastrar el mouse hasta la última celda.

Modificar propiedades de la tabla utilizando el inspector de propiedades.
a) Seleccionar la tabla.
b) En el Inspector de Propiedades
Table Id. Nombre de la tabla.
Rows. Núm. de renglones.
Cols. Núm. de columnas.
Cell Pad.
CellSpace.
Align (Alineación): Derecha, Izquierda, Centrada.
Brdr color (Color del borde).
Bg color (Color de fondo).

16/16


Manual del Alumno

Modificar el Ancho de columnas.
a. Seleccionar la o las columnas.
b. En el Inspector de Propiedades. Modificar W Ancho en Pixeles (Ej: 300) o en Porcentaje (Ej: 40%).

Insertar renglones o columnas. (Menú Modify/table o clic derecho sobre la tabla/opción Table)

Alineación vertical y horizontal del contenido de las celdas.
a. Seleccionar las celdas.
b. En el Inspector de Propiedades,
i. Horz (izquierda, centrada, derecha).
ii. Vert (Arriba, en medio. abajo).
Combinación de celdas.
a. Seleccionar las celdas.
b. En el Inspector de Propiedades dar clic al botón merge.

17/17


Manual del Alumno

TEMA 8. CSS Cascading Style Sheets.
CSS son diferentes tipos de formatos que facilita asignarlos como plantillas o “templates” a todos los elementos de
una página, por ejemplo tablas, imágenes, texto, ligas, etc. Este estilo se puede utilizar como una plantilla, por
ejemplo, se asigna los colores y tipos de texto, colores de fondo, o formatos de las tablas; se definen los formatos
una sola vez y se aplican a todas las páginas, en lugar de hacerlos uno por uno en cada página..

Para asignar una nueva regla de CSS.

1.) Posicionar el apuntador del mouse sobre el área 1 como se muestra en la figura.
2.) Seleccionar del sub menú NEW

O se puede

1.) Dar un Clic sobre el botón de New CSS Rule 2

1

2

Desplegará la
siguiente
ventana.

18/18


Manual del Alumno

1

2

3

1.) Seleccionar en el Selector Type: TAG (redefine el estilo de una etiqueta específica).
2.) Seleccionar una Etiqueta de la lista de TAG, por ejemplo body.
3.) En el cuadro Define In: seleccionar (New Style Sheet File) de la lista.
4.) Guardar el archivo con la nueva regla en un folder llamado css. Esta carpeta se crea con el botón “Create new
folder”
a. Clic al botón Create New Folder.
b. Darle el nombre de css dentro de la carpeta raíz de sitio.
c. Asignar el nombre del archivo de estilos de la página.
d. Clic en Save.

a

b

c d

19/19


Manual del Alumno

Mostrará un cuadro de dialogo donde se asigna en formato al texto, fondo, listas, tablas, etc.

Se puede agregar más de una regla dando un clic sobre el botón New CSS Rule Se selecciona una
etiqueta nueva por ejemplo h1 (Heading 1) que se desea agregar en el archivo de estilo definido anteriormente.

Posteriormente se le asignará los formatos a los textos que sean asignados como Heading 1 (h1).

20/20


Manual del Alumno

TEMA 9. MARQUEE.
Para agregar el elemento “Marquee” o marquesina dentro de un sitio web es necesario escribir código HTML ya
que Dreamweaver no tiene un comando o botón que lo realice fácilmente. El Marquee puede ser un texto, imagen
o ambos.

MARQUEE
La etiqueta <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza.
Funciona únicamente con Ms-Explorer. Sus parámetros son los siguientes:
behavior = alternate / scroll / slide. Indica si el texto de la marquesina va rebotar de lado a lado en la pantalla
(alernate), si va a cruzar la pantalla desaparecer y aparecer de nuevo (scroll) o si va a cruzar la pantalla y al llegar
al lado opuesto se detiene (slide).
align = top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la
baja (bottom) o en el centro (middle) de la misma.

bgcolor = quot;codigo de colorquot; Indica el color del fondo de la marquesina.

direction = left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha
(right).

height = num o %. Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del
navegador.

width = num o %. Indica la anchura de la marquesina en puntos o porcentaje en función de la ventana del
navegador.

loop = num / infinite Indica el número de veces que se desplazará el texto por la marquesina. Si se indica
“infinite”, se desplazará indefinidamente.

scrolldelay = num. Indica el número de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor
número más lentamente se desplazará el texto.

scrollamount = num. Indica la cantidad de texto que se muestra en cada momento en la marquesina.

La medida es en pixels.
Ejemplo de “marquee”.
<marquee behavior=“alternatequot; width=“50%” scrollamount=”10” direction=”left” > Bienvenido a mi pagina personal
en Internet. </marquee>

Para ver una guía rápida con ejemplos interactivos visitar la página
http://crismattweb.tripod.com/guiahtml/marquee.html

21/21


Manual del Alumno

TEMA 10. IMAGEN ROLLOVER.
Un ROLLOVER es una imagen que se cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen
suele utilizarse en los menús o en los botones para desplazarse a través de distintas páginas.

Insertar un ROLLOVER.

1.) Clic al Menú Insert Image Objects Rollover image. En la nueva ventana se especifica la imagen
original y la de sustitución.

2.) Es preferible que la opción Carga previa de imagen de sustitución (Preload rollover image) esté activa. Si
se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras
debidas a la descarga de la imagen cuando llega el momento de que aparezca.

3.) El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en
lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador.

4.) El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del
campo Alt del inspector de propiedades de la imagen seleccionada.

22/22

Manual Alumno Diseño Sitios

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Destacado

Destacado (9)

Similar a Manual Alumno Diseño Sitios

Similar a Manual Alumno Diseño Sitios (20)

Manual Alumno Diseño Sitios