PDF de programación - APUNTES DE DREAMWEAVER - CLASE II

APUNTES

DE



DREAMWEAVER



CLASE II



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



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

En la quinta fila insertaremos la foto.

Dreamweaver

10



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







Se abrirá la siguiente ventana:



Dreamweaver

12



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



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