Dw Mc1.0 PolitéCnica Manual Del Alumno 03 Ago Ot09

qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjkl

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

DISEÑO DE SITIOS WEB

Manual del Alumno



Manual del Alumno

9.doc9 2/2

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-Ot0



Manual del Alumno

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

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

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

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 sólo en la publicación del sitio sino en su mantenimiento (actualización). Posteriormente se evaluará cada

ea.

Ejemplo.

id

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

• Calendario de eventos del gobierno • Directorio telefónico de las diferentes

endencia

uesta a las preguntas más frecuent• Etc.

cer clic

r más sobre los animales, ciudades,

• Etc.

Secretarías • Ligas hacia las diferentes dep s

en la imagen pueden iniciar el juego • Una sección en la que los niños puedan

sabecomo el DIF, turismo, etc. • Resp es etc.

• Ligas a otros sitios • Manejo de juegos donde con solo ha

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

eb.

n movimiento

lores que llamen la atención

enga una navegación más fácil

ientes páginas

W Ejemplo de la compañía Chiquitín. • Las imágenes y textos tendrá

o animación. • Se utilizarán co

a los usuarios. • Se hará mucho uso de imágenes para que

el usuario tpor el sitio.

• Se manejarán las sigu : a)

pales del sitio b)

, la ción del web master, etc.

c) juegos que se

jar en el sitio

páginas de enciclopedias infantiles

iseño de la página principal

divertichicos.html Tiene las opciones princiquienes_somos.html Contiene la información general del sitiomisión, informajuegos.html Contiene la lista de los pueden mane

d) tareas.html Contiene las ligas o vínculos a diferentes

D

.

Ejemplo de otros sitio

ttp://www.kokone.com

s

h

d

ttp://www.biblioninos.cl/ h



Manual del Alumno


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

El diseño del sitio toma en consideración las necesidades de los usuarios potenciales del mismo. Abajo, se puede

bservar la diferencia entre el diseño requerido para un sitio que será utilizado por adultos y uno para niños, en s de color, imágenes, colores, letras, etc.

ón o Mapa del sitio. onsiste en tomar en cuenta el contenido de las páginas para organizar la forma en que se navegará dentro del

superior

otérmino

d

Paso 3. Diseñar la Estructura de NavegaciCsitio Web; mediante un diagrama u organigrama. La Página de Inicio, también conocida como “Home Page” o “Index Page”, aparece en la parte 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 omo se muestra a continuación:

s de 10 años interesadas en obtener información

Niños

Personas mayore

acerca del estado de Nuevo León o en hacer algún trámitegubernamental.

y amas de casa interesados en el producto o en informaciónnutrimental.

c



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

signar un responsable y fecha límite para llevar a cabo la tarea. ripción de la Tarea - Fecha Lím sa

sitio Web, así como también aDatos requeridos: Desc ite - Respon ble Ejemplo y Formato sugerido Descripción de la Tarea Fecha Límite Responsable Seleccionar el proyecto final autorizado por el maestro 30 Enero Todos

Recolectar y organizar la papelería necesaria para el sitio 6 de febrero Mario Garza 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.

ar la página Index y sus páginas web secundarias. Una vez

na vez que se terminen de crear todas las páginas, es necesario probar el sitio para cerciorarse de que todo el

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

En este paso se utiliza el mapa del sitio para crecreadas 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. Utrabajo 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. Uue d



Manual del Alumno

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

TEMA 2. VENTANA DE LA APLICACIÓN DREAMWEAVER.



Manual del Alumno

7/7

TEMA 3. CREACION DE UN SITIO Y SUS PÁGINAS. Al formar lo as y de archivos es recomendable tomar en cuenta lo siguiente:

2. Sin acentos.

.

1. El nombre del sitio. el sitio como: páginas web, imágenes,

sarrollo del sitio. rpeta raíz).

nde se guardará el sitio. Si se utiliza el ionado el nombre de la carpeta raíz. La

5. Carpeta de imágenes: Da clic en el folder amarillo, busca la carpeta raíz y crea una nueva carpeta

la pantalla “site definition” (definición del sitio).

parecerá en el panel de archivos. Asegurar que la carpeta de ágenes se encuentre DENTRO

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

s nombres de carpet1. Sólo letras minúsculas.

3. Sin caracteres especiales. 4. Sin espacios5. Para separar texto utilizar solamente el guión o el guión bajo.

Para crear un sitio es necesario definir 3 elementos:

2. La carpeta raíz. Para almacenar todos los archivos que componenanimaciones, videos o cualquier archivo que se necesite en el de

3. La carpeta de imágenes por default (debe estar dentro de la ca Pasos para crear un sitio en Dreamweaver.

1. Seleccionar Site del menú principal y luego la opción New Site. Seleccionar la pestaña Advanced. 2.

3. Escribir el nombre del sitio (Ej: “Site Example”). Carpeta raíz: Tecl4. ear o buscar la ruta de la carpeta raíz en dobuscador, asegurarse que en donde dice “Select:” esté selecccarpeta raíz se puede crear en este mismo paso.

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

Dreim

amweaver habrá creado el nuevo sitio, y éste a de la carpeta raíz o el sitio no funcionará adecuadamente.

s nuevas en un sitio. rchivos, presionar el botón derecho del ratón sobre el nombre del sitio.

3. Modificar “untitled” por el nombre de la página. Asegurarse de no quitar la extensión “.html”, o en su caso

conveniente que sea “index.html”, para que al publicar el sitio en Internet, el servidor la

otro nombre, en el panel de archivos, presionar el botón derecho sobre su nombre y

Si se requiere hacer cambios a la definición del sitio.

Menú Principal > Site > Manage Sites > Edit.

ara crear pPasos p ágina1. En el Panel de A2. Seleccionar New File.

agregarla. 4. Teclear enter.

Dar un doble 5. clic en el nombre de la página para abrirla y editarla. Nombre de la página principal del sitio.

1. El nombre esreconozca.

2. Si se le poneseleccionar “Set as Homepage”. Es recomendable que siempre se establezca la página Index como “HomePage”



Manual del Alumno


tulo de la página. rio ponerle título a cada una de las páginas, en la caja Title de la Barra de Herramientas del

navegación al correr el sitio en Internet. Not s a las páginas para no perder el trabajo. ExPara qu o se pueda abrir en cualquier computadora es necesario exportarlo. Esto hará que se genere un archivo con la extensión .STE file.

3. Save. ne.

Not bios a alguno de los 3 elementos para definir un sitio (nom Im

ara 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.

Tí

1. Es necesaDocumento.

2. Este título aparece en la barra azul dea. Se debe grabar constantemente los cambios hecho

portar el sitio. e el sitio generad

1. Utilizar Menú Site/Manage Sites/Export. 2. Seleccionar la carpeta raíz.

4. Do

a. Sólo si durante el desarrollo del sitio, se hacen cambre del sitio, carpeta raíz y carpeta de imágenes) será necesario volver a exportarlo.

portar el sitio P



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.



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



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.



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.



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 sitio. c. a otro sitio web (www...) c. a otro sitio web (www...) d. a una dirección de correo electrónico. d. a una dirección de correo electrónico. e. a una imagen. e. a una imagen.

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

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

4. Liga a una dirección de correo. 4. Liga a una dirección de correo.

a. Seleccionar el texto. a. Seleccionar el texto. b. Menú Insert/E-Mail Link. b. Menú Insert/E-Mail Link. c. Escribir la dirección del correo electrónico en el cuadro E-MAIL. c. Escribir la dirección del correo electrónico en el cuadro E-MAIL. d. Presionar la tecla Ok. d. Presionar la tecla Ok.

5. Insertar una liga. 5. Insertar una liga. e. Seleccionar el texto, la imagen o el hotspot. e. Seleccionar el texto, la imagen o el hotspot. f. Escribir en el apartado link del Inspector de propiedades, el vínculo deseado. f. Escribir en el apartado link del Inspector de propiedades, el vínculo deseado. g. Presionar la tecla enter. g. Presionar la tecla enter.

Tipos de ligas.Tipos de ligas. Enlazar a: Link del inspector de

propiedades Ejemplo del link

Otra página del mismo sitio <nombre de la pagina>.html

pagina2.html

Un ancla dentro de la página actual

#<nombre del ancla> #inicio

Un ancla dentro de otra página del mismo sitio

<nombre de la pagina>#<nombre del ancla>

papel.html#ventajas

Otro sitio web http://<direccion web>

http://www.google.com.mx

Dirección de correo electrónico mailto:<direccion de correo electrónico>

mailto:[email protected]

Una imagen <carpeta de imágenes>/<nombre de la imagen>

imagenes/piramide-nutricional

mailto:%3Cdireccion

mailto:[email protected]



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.



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

3

2

1



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).



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.



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.



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

d



Manual del Alumno


ostrará un cuadro de dialogo donde se asigna en formato al texto, fondo, listas,

M tablas, etc.

e puede agregar más de una regla dando un clic sobre el botón New CSS Rule Se selecciona uSe

na tiqueta 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).



Manual del Alumno

itécnica-manual-del-alumno-03Ago-Ot09.doc9 21/21

weaver no tiene un comando o botón que lo realice fácilmente. El Marquee puede ser un texto, imagen

l interior de la marquesina se alinea en la zona alta (top), en la

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

m o %. Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del

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

de veces que se desplazará el texto por la marquesina. Si se indica

ndos que tarda en reescribirse el texto por la marquesina, a mayor

ica la cantidad de texto que se muestra en cada momento en la marquesina.

rnate" width=“50%” scrollamount=”10” direction=”left” > Bienvenido a mi pagina personal

interactivos visitar la página ttp://crismattweb.tripod.com/guiahtml/marquee.html

dw-mc1.0-Pol

TEMA 9. MARQUEE. Para agregar el elemento “Marquee” o marquesina dentro de un sitio web es necesario escribir código HTML ya

ue Dreamqo 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). lign = top / middle / bottom Indica si el texto dea

baja (bottom) o en el centro (middle) de la misma. bgcolor = "codigo de color" Indica el color del fondo de la marquesina.

irectiod(right).

eight = nuhnavegador.

idth = numwnavegador. oop = num / infinite Indica el número l“infinite”, se desplazará indefinidamente.

crolldelay = num. Indica el número de milisegusnúmero más lentamente se desplazará el texto. scrollamount = num. Ind La medida es en pixels. Ejemplo de “marquee”. <marquee behavior=“alteen Internet. </marquee> Para ver una guía rápida con ejemplos h



Manual del Alumno


que se cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen a desplazarse a través de distintas páginas.

1.) Clic al Menú Insert Image Objects Rollover image. En la nueva ventana se especifica la imagen

original y la de sustitución.

TEMA 10. IMAGEN ROLLOVER. Un ROLLOVER es una imagenuele utilizarse en los menús o en los botones pars

Insertar un ROLLOVER.

2.) Es preferible que la opción Carga previa de imagen de sustitución (Preload rollover image) esté activa. Si

.) 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.

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

Documents

Dw Mc1.0 PolitéCnica Manual Del Alumno 03 Ago Ot09