DREAMWEAVEREliana Navarro Julio

Grado 11.

¿QUÉ ES DREAMWEAVER?

Dreamweaver es la herramienta más avanzada para el

diseño de páginas Web.

Dreamweaver es posible diseñar sitios Web , desarrollar

aplicaciones y mantenerlas.

Dreamweaver proporciona herramientas visuales de

diseño que permiten agregar fácilmente elementos

innovadores y prácticos a las páginas Web, además cuenta

con funciones para el desarrollo de aplicaciones que

permiten crear aplicaciones Web dinámicas.

OBJETIVOSObjetivo General

Planificar, diseñar y administrar un sitio Web utilizando Dreamweaver MX.

Objetivos específicos

Planificar y definir la estructura de un sitio Web.

Utilizar las principales herramientas de Dreamweaver en el diseño de páginas Web.

Aprender a publicar, mantener y administrar un sitio Web.

METODOLOGÍA 18 horas presenciales. Tendremos alrededor de 12 sesiones de clases. (1,5

horas).

Lecturas previas: como introducción al tema que se trabajará en la clase.

Clases: 12 reuniones de 1,5 horas cada una donde se resolverán las dudas y

dificultades que se presenten con las lecturas previas, se desarrollarán

algunos temas, y se realizarán ejercicios de aplicación con el fin de afianzar

los conocimientos adquiridos.

Prácticas: Al final de cada clase se realizará un ejercicio de aplicación de las

temáticas tratadas aquí y en la lecturas previas.

SEGUIMIENTO Y EVALUACIÓN

La evaluación es continua y se basa en el conjunto de actividades, ejercicios y

trabajos independientes, que se llevan a cabo en Las diferentes clases.

Calendario de evaluaciones y actividades

En la primera sesión se propondrá una actividad que deberá ser realizada a

medida que avanza el curso y entregada en la última clase del periodo.

Clase 5: Entregar el esquema para el sitio web a realizar.

Valor: 40% de la evaluación total.

Clase 10: Entrega del trabajo final . Valor: 60% de la evaluación total.

Es imprescindible superar ésta evaluación para poder aprobar el curso

satisfactoriamente.

EL SITIO WEB Y EL ÁREA DE TRABAJO

El área de trabajo de Dreamweaver contiene elementos como el documento,

la barra de herramientas y los páneles entre otros, los cuales permiten

agregar, modificar y eliminar elementos en nuestro sitio web.

Objetivos

Identificar los elementos que componen el área de trabajo de Dreamweaver.

Identificar las características de un sitio web.

LECTURA

¿Qué es un sitio Web?

Área de trabajo

Archivos electrónicos y páginas Web.

Son accesibles mediante el protocolo HTTP de Internet. Este conjunto de

páginas tiene como objetivo el desarrollo de algún tema, prestar servicios o

entregar contenidos asociados al entorno de la página.

Un Sitio

El sitio local es una estructura que se establece

en el computador personal para que contenga

todas las carpetas, activos y archivos del sitio

Web. La carpeta raíz local del sitio debe ser única

para cada sitio.

Creación de un Sitio

El procedimiento para crear un sitio nuevo es el siguiente:

1. Elija en el menú Sitio la opción Nuevo sitio.

Seleccione la pestaña Avanzadas.

En la ventana que aparece (Definición de sitio) estará seleccionada

la categoría Datos locales.

Planificación del Sitio

Esta primera actividad consiste en realizar la planificación del sitio, para

ello:

Defina el nombre del sitio.

Determine los objetivos del sitio.

Defina la estructura que tendrá la información que se va a publicar en su

sitio.

Realice un boceto que muestre la forma como se desplegarán los

contenidos que van a ser publicados.

HOJAS DE ESTILOS, IMÁGENES Y

MARQUESINAS

Las hojas de estilo permiten dar un formato homogéneo y actualizar los

elementos de una página Web en forma automática. Se usan principalmente para

especificar el formato de texto y para definir atributos de imágenes, tablas,

vínculos, etc.

Objetivos:

Aplicar hojas de estilo a una página.

Importar imágenes y modificar sus propiedades.

Aplicar marquesinas a una página.

Hojas de estilos

Plantillas que permiten cambiar el formato de presentación de cualquier

etiqueta de HTML.

Controlar todos los elementos de la presentación de un documento HTML:

márgenes de página, espaciado entre párrafos, tamaños y tipos de letra, color

y fondos, etc.

Atributos de etiquetas.

Fuente - FontFuente - Font

Nombre del Atributo Descripción Posibles Valores Ejemplos

color

Sirve para indicar el

color del texto. Lo

admiten casi todas las

etiqetas de HTML.

valor RGB o nombre

de color.

color: #009900;

color: red;

font-size

Sirve para indicar el

tamaño de las fuentes

de manera más rígida

y con mayor exactitud.

xx-small | x-small |

small | medium |

large | x-large | xx -

large Unidades de CSS

font-

size:12pt; font-

size: x-large;

PARRAFOS - TEXT

PARRAFOS - TEXT

Nombre del

AtributoDescripción Posibles Valores Ejemplos

line -height

El alto de una línea,

y por tanto, el

espaciado entre

líneas. Es una de

esas características

que no se podian

mofificar utilizando

HTML.

normal y unidades

CSS

line-height: 12px;

line-height: normal;

¿Qué se definen las Hojas de Estilos?

El modo de funcionamiento de las Hojas de Estilos en Cascada (CSS) consiste

en definir, mediante una sintaxis especial, la forma de presentación que se le

aplicará a:

Un sitio Web entero, de modo que se puede definir la forma de presentación

de todo el sitio Web de una sola vez.

Un documento HTML o página Web.

Una porción del documento.

Una etiqueta en concreto.

Creación de una Hoja de Estilos.

Cómo crear una hoja de estilos

se deben seguir los siguientes pasos:

Abrir el panel Estilos. Ventana > Estilos CSS.

Dar click en la opción Nuevo estilo del panel Estilos CSS.

Asignamos nombre y tipo de estilo.

•Crear estilo personalizado: también llamados estilos de clase, le permiten

configurar atributos de estilo a cualquier rango o bloque de texto.

•Redefinir etiqueta HTML: redefinen el formato de una determinada etiqueta,

como h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto

formateado con dicha etiqueta se actualiza inmediatamente.

Usar selector CSS: redefinen el formato de una determinada combinación de

etiquetas (por ejemplo, td h2 se aplica cada vez que aparece un encabezado h2

dentro de una celda de tabla) o de todas las etiquetas que contienen un atributo id

específico (por ejemplo, #miEstilo se aplica a todas las etiquetas que contienen el

par atributo-valor ID=“miEstilo”).

Aplicar estilos

Para aplicar un estilo CSS se debe seleccionar el objeto al cual se le quiere

aplicar el estilo y seleccionar en el panel "Estilos CSS" el estilo que se quiere

aplicar.

O Hacemos clic derecho, seleccionar Estilos CSS y luego seleccionar el estilo

que se desea aplicar.

Imágenes

Insertar una imagen

1.Sitúe el punto de inserción en el lugar de la ventana de documento donde desea que aparezca la imagen y, a continuación lleve a cabo una de estas operaciones:

•Elija Insertar > Imagen.

•Haga clic en el botón Insertar imagen de la categoría "Común" del panel

Objetos.

•Presione Control+Alt+I.

O, sin seleccionar el punto de inserción de la imagen, puede realizar una de las siguientes operaciones

•Arrastre el botón Insertar imagen desde el panel Objetos hasta la posición deseada de la ventana de documento.

•Arrastre una imagen desde el panel Activos hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

•Arrastre una imagen desde la ventana Sitio hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

•Arrastre una imagen desde el escritorio hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

2.En el cuadro de diálogo que aparece, haga clic en Examinar para elegir un archivo o escriba la ruta del archivo de imagen.

3.Defina las propiedades de la imagen en el inspector de propiedades.

Configurar Propiedades de las imágenes

Para configurar las propiedades de imágenes, seleccione una imagen en la ventana de documento y, a continuación, podrá visualizar todas sus propiedades en el Inspector de propiedades.

An y Al: Reservan espacio para una imagen en una página alcargarla en un navegador. Dreamweaver rellena automáticamenteestos campos con el tamaño original de la imagen.

Orig: Especifica el archivo de origen para la imagen.

Vínculo: Especifica un hipervínculo para la imagen.

Alinear: Alinea una imagen y texto en la misma línea.

Alt: Especifica el texto alternativo que aparece en lugar de la imagen en los

navegadores que sólo admiten texto o en aquéllos configurados para

descargar las imágenes manualmente.

Map: Permite crear mapas de imagen de la parte del cliente.

Espacio V y Espacio H: Añaden espacio en píxeles a los lados de la imagen.

Espacio V añade espacio en la parte superior e inferior de una imagen.

Espacio H añade espacio a la izquierda y la derecha de una imagen.

Destino: Especifica el marco o la ventana donde se cargará la página vinculada.

Orig base: Especifica la imagen que debe cargarse antes de la imagen principal. Muchos diseñadores utilizan una versión de dos bits (blanco y negro) de la imagen principal porque se carga más rápidamente y ofrece a los visitantes una idea de lo que van a ver.

Borde: Establece en píxeles el ancho del borde del vínculo alrededor de la imagen.

Editar: Inicia el editor de imágenes que ha especificado en las preferencias de editores externos y abre la imagen seleccionada.

Restablecer tamaño: Restablece los valores de An y Al para devolver el tamaño original a la imagen.

Cambiar el tamaño de un elemento

1.Seleccione el elemento (por ejemplo, una imagen) en la ventana de

documento.

En los lados inferior y derecho del elemento y en la esquina inferior derecha

aparecen manejadores de cambio de tamaño.

2. Cambie el tamaño del elemento arrastrando el manejador de selección del lado

derecho (para ajustar ancho), de la parte inferior (para ajustar altura), o de la

esquina (para ajustar ancho y alto simultáneamente)

Para conservar las proporciones del elemento (su relación ancho/alto) al ajustar

sus dimensiones, arrastre el manejador de selección de la esquina mientras

presiona la tecla Mayús.

Mapas de imágenesEs una imagen que se ha dividido en regiones o zonas interactivas. Cuandose hace clic en una zona interactiva, se realiza una acción, por ejemplo, laapertura de un archivo.

Crear un mapa de imagen1.Seleccione la imagen.

2. Haga clic en la flecha de ampliación, situada en el ángulo inferior derecho del Inspector de propiedades, para ver todas las propiedades.

3.En el campo Mapa, introduzca un nombre exclusivo para el mapa de imagen.

Nota: Si utiliza múltiples mapas de imágenes en el mismo documento, asigne un nombre exclusivo a cada uno.

4.Para definir las áreas de mapas de imagen, lleve a cabo una de estas operaciones:

Seleccione la herramienta circular y arrastre el puntero sobre la imagenpara crear una zona interactiva circular.

•Seleccione la herramienta de rectángulo y arrastre el puntero sobre laimagen para crear una zona interactiva rectangular.

Seleccione la herramienta poligonal y defina una zona interactiva conforma irregular haciendo clic una vez en cada esquina. Haga clic en laherramienta de flecha para cerrar la forma.Una vez creada la zona interactiva, aparecerá el inspector de propiedades dezonas interactivas. Para obtener más información sobre el Inspector depropiedades de zonas interactivas, consulte "Configurar propiedades dezonas interactivas".

Imagen de sustitución

Una imagen de sustitución es una imagen que cambia cuando el

puntero pasa sobre ella. Una imagen de sustitución consta en

realidad de dos imágenes: la imagen principal (la que aparece

al inicialmente la página) y la imagen de sustitución (la que

aparece cargarse al pasar el puntero sobre la imagen principal).

Ambas imágenes deben tener el mismo tamaño. Si tienen

tamaños distintos, Dreamweaver cambia automáticamente el

tamaño de la segunda imagen para que se ajuste a las

propiedades de la primera.

Para crear una imagen de sustitución:

En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca la imagen de sustitución.

Introduzca la imagen de sustitución mediante uno de estos métodos:

En la categoría Común del panel Objetos, haga clic en el icono Insertar imagen de sustitución.

En la categoría Común del panel Objetos, arrastre el icono Insertar imagen de sustitución hasta la posición deseada de la ventana de documento.

Elija Insertar > Imágenes interactivas >Imagen de sustitución.

Aparecerá el siguiente cuadro de diálogo:

Marquesinas

Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana, pararse o estar en continuo movimiento en forma de línea cómo los ejemplos.

Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código.

Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina.

Muchas veces el uso de marquesinas no es recomendable, ya que distrae al visitante del contenido que realmente es de su interés.

Ejemplos:

<MARQUEE BEHAVIOR=SCROLL>texto</MARQUEE>

Texto en movimiento de derecha a izquierda sin

interrupciones

<MARQUEE BEHAVIOR=SLIDE> texto</MARQUEE>

Texto en movimiento desde la derecha con parada en

el lado izquierdo

<MARQUEE BEHAVIOR=ALTERNATE> texto</MARQUEE>

Texto en movimiento continuo de derecha a izquierda

y viceversa

<MARQUEE BGCOLOR=red>texto</MARQUEE>

Establece el color de fondo

<MARQUEE DIRECTION=RIGHT>texto</MARQUEE>Define la dirección del movimiento (en este caso de

derecha a izquierda)

<MARQUEE HEIGHT=20 WIDTH=300>texto</MARQUEE>Altura (height) y anchura (width) en píxel.

<MARQUEE HSPACE=10 VSPACE=10>texto</MARQUEE>

Distancia, en píxel, de los márgenes laterales

(HSPACE) y superior e inferior (VSPACE)

<MARQUEE LOOP=5>texto</MARQUEE>Número de veces que pasa el texto. El parámetro

puede impostarse en INFINITAS.

<MARQUEE SCROLLDELAY=5 SCROLLAMOUNT=2>texto</MARQUEE>

Velocidad, en milésimas de segundo, de visualización

de los mensajes.

<MARQUEE>texto + imagen</MARQUE>También se puede hacer con texto e imagenes

TALLER EN CLASE

1. Con la siguiente imagen crear zonas interactivas para los departamentos de

Antioquia, Cesar, Córdoba, Boyacá, Sucre, Guajira y vincularlo con sus

respectivas páginas.

2. Crear en las páginas de Antioquia, Córdoba, Guajira, imágenes de

sustitución con las imágenes de sus respectivos departamentos.

3. Para las páginas de Antioquia, Córdoba y Guajira crear marquesinas con

información como la población, la extensión, Capital, temperatura etc.

CONSULTA EN CASA

¿Por qué usar plantillas?

¿Cómo se crea una plantilla?