Dreamweaver

1. DREAMWEAVER
Eliana Navarro Julio
Grado 11.

2. ¿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.

3. OBJETIVOS
Objetivo 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.

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

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

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

7. LECTURA
 ¿Qué es un sitio Web?
Área de trabajo

8.  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.

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

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

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

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

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

16. Fuente - Font
Fuente - 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;

17. PARRAFOS - TEXT
PARRAFOS - TEXT
Nombre del
Atributo
Descripcion 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;

18. ¿Qué se define en 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.

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

20. •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”).

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