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 - 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;

PARRAFOS - TEXT

PARRAFOS - TEXT

Nombre del

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

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.