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