APUNTES

DE

DREAMWEAVER

CLASE II

PROF. VIVIANA LLORET

http://aulamatic.blogspot.com
 DREAMWEAVER

Clase II: En esta clase aprenderemos a copiar texto desde otro

programa y pegarlo en las páginas creadas, aplicarles estilos, utilizar
imágenes de sustitución (ROLLOVER) para crear la botonera en
reemplazo de los hipervínculos creados anteriormente, Insertar una
imagen, utilizar Texto Flash en el título de la primera página, crear un
enlace a una dirección de correo electrónico.
Recordar que como el presente sitio web tiene una plantilla todos los
cambios (excepto copiar el texto e insertar la foto, ya que esto debe
hacerse en la página que corresponda, en la región editable) los
debemos hacer en la plantilla, y luego actualizar las páginas
adjuntadas.

Abrir Dreamweaver, y seleccionamos en, abrir un elemento

reciente currículum_vitae/index.html.

Insertar en la Región editable, una tabla de 5 filas y 1

columna, Tamaño 100%, borde 0.
En la cuarta fila copiaremos el primer párrafo del archivo
currículum_vitae.doc, desde Nombre … hasta teléfono para mensajes.

Selecciona el párrafo anteriormente citado en dicho

documento, clic botón derecho> copiar, coloca el cursor en la
cuarta fila de la página index.html, botón derecho > Pegar.
Selecciona dicho texto para aplicarle un estilo.

Dreamweaver 9 Prof. Viviana Lloret

Un estilo CSS no es más que un conjunto de reglas de formato que
controlan el aspecto del contenido de una página Web. Los estilos
CSS aportan gran flexibilidad y control al aspecto exacto que se busca
en una página, desde la posición precisa de elementos hasta el diseño
de fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan
con una capacidad simple de actualización; cuando actualiza un estilo
CSS, el formato de todos los documentos que usan ese estilo se
actualiza automáticamente.

Selecciona dicho texto para aplicarle un estilo

Selecciona en Fuente: Verdana, Arial, Helvética. Te preguntarás

por qué tres?, y la respuesta es: cuando seleccionamos un tipo de
fuente al editar una página web, en realidad seleccionamos una
familia de fuentes y esto es porque si en el navegador del usuario que
visualiza la página no tiene la primer fuente, visualizará la segunda…,
en color de fuente selecciona #666666, dreamweaver creará con
nuestros cambios un nuevo estilo y lo llamará estilo1, estilo2,… . Si le
queremos dar un nombre a nuestro estilo, despliega el cuadro
estilo, selecciona cambiar nombre, en la ventana que se abre
colócale un nombre, en este ejemplo le colocamos “texto”.

Dreamweaver 10 Prof. Viviana Lloret

En la quinta fila insertaremos la foto.
Para ello: ubica el cursor en dicha fila, selecciona, en la
ventana de Propiedades alinear al centro, clic en Insertar >
Imagen: En la ventana que se abre, dentro de la carpeta
imágenes, selecciona foto.JPEG.

En texto alternativo (en algunos casos aparece Alt): se escribe el

texto que se visualizará cuando se apoye el Mouse sobre dicha
imagen.

Texto Flash: El texto Flash intercambia el color del texto cuando el

puntero se sitúa sobre el.
Para ello hacemos clic en Insertar> Media > Texto Flash

Dreamweaver 11 Prof. Viviana Lloret

Se abrirá la siguiente ventana:

Dreamweaver 12 Prof. Viviana Lloret

Debemos especificar el tipo de fuente, color inicial y el de sustitución,
el texto, y el color de fondo. También se puede utilizar como
hipervínculo haciendo clic en examinar (cuadro vínculo) y
seleccionando algún archivo o dirección.

En la segunda fila de la tabla coloca un texto flash en donde

figure Currículum Vitae

Rollover o imagen de sustitución: Un rollover es una imagen que

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
desplazarnos a través de distintas páginas.

Reemplazaremos los hipervínculos creados en la plantilla por

Rollover. Para ello copia los botones home1.jpg, home2.jpg,
perfil1.jpg, etc en la carpeta imágenes.

Abre la plantilla, borra el texto home y haz clic en Insertar >

Objeto de imagen imagen de sustitución, se abrirá la
siguiente ventana:

En imagen original selecciona Home1.JPG, en imagen de

sustitución selecciona Home2.JPG, texto alternativo Home, y
Al hacer clic,ir a URL haz clic en examinar y luego en
index.html.Realiza el mismo procedimiento para los demás
botones.

Por último en la página index.html crearemos un vínculo a una

dirección de correo, que al hacer clic en ella se abrá el Outlook
Express, para ello seleccionamos la dirección de correo, botón
derecho cortar, clic en vínculo correo electrónico

Dreamweaver 13 Prof. Viviana Lloret

En la ventana que se abre escribimos la dirección de correo >
Aceptar.

Guarda todos los cambios y oprime F12 para visualizar tu página en

el navegador.

Dreamweaver 14 Prof. Viviana Lloret