Dream

LECCION 1

DREAMWEAVER

TEMA: QUE ES DREAMWEAVER.

OBJ: CONOCER DE FORMA INTEGRAL EL CONCEPTO DE UN SITIO Y DREAMWEAVER.

Dreamweaver CS3 es un software fácil de

usar que permite crear páginas web profesionales.

Permiten agregar rápidamente diseño y funcionalidad a las

páginas, sin la necesidad de programar manualmente el

código HTML.

Se puede crear tablas, editar marcos, trabajar con capas,

insertar comportamientos JavaScript, etc., de una forma

muy sencilla y visual.

Las páginas que vemos en Internet están escritas

utilizando el lenguaje HTML (Hyper Text Markup

Language). Este lenguaje está basado

en etiquetas que marcan el inicio y fin de cada

elemento de la página Web

Cuando utilizamos Dreamweaver para crear una

página Web no tenemos que preocuparnos de

todo esto. Dreamweaver inserta

automáticamente las etiquetas necesarias para

construir la página con la apariencia y contenido

definidos en el editor gráfico.

HTML Básico

Cualquier editor de texto permite crear

páginas web. Para ello sólo es necesario

crear los documentos con la

extensión HTML o HTM, e incluir como

contenido del documento el código HTML

deseado. Puede utilizarse incluso el Bloc de

notas para hacerlo.

Todos los programas Adobe Dreamweaver CS3

FORMAS PARA EJECUTAR EL PROGRAMA.

Desde el icono de Dreamweaver CS3 del escritorio

Hacer clic en el botón abrir de

la

barra de herramientas estándar.

Pulsar la combinación de

teclas Ctrl+O.

Hacer clic sobre el menú Archivo y

elegir la opción Abrir.

Hacer doble clic sobre el archivo en

la ventana del sitio.

Hacer clic en el botón

guardar de

la barra de herramientas

estándar. Pulsar la combinación de

teclas Ctrl+S.

Hacer clic sobre el

menú Archivo y elegir la

opción Guardar.

PASOS PARA ABRIR Y GUARDAR UNA PAGINA

Pasos para crear una página web.

Lo primero que tienes que hacer es abrir Dreamweaver.

Abres un documento nuevo y seleccionas

la Categoría Página básica, HTML.

Seguidamente introduce el texto.

Una vez introducido el texto, vas a

modificar el título y el color de fondo

del documento.

Para ello debes hacer clic sobre el

menú Modificar y elegir la

opción Propiedades de la página.

Práctica

Realizar una

página web.

*Crear una

Autobiografía

.

LECCION 2

TEMA: ENTORNO DE TRABAJO

OBJ: CONOCER LOS ELEMENTOS BASICOS DE DREAMWEAVER

Barra de título

La barra de

herramientas

estándar

La barra de menús

La barra de

herramientas de

documento

La barra de estado

paneles e inspectores

VISTAS DE UN DOCUMENTO

La vista Diseño permite

trabajar con el editor visual.

Es la vista predeterminada

de Dreamweaver y la que

se suele utilizar

habitualmente.

La vista Código se utiliza para

poder trabajar en un entorno

totalmente de programación, de

código fuente. No permite tener

directamente una referencia

visual de cómo va quedando el

documento según se va

modificando el código.

La vista Código y

Diseño permite dividir la

ventana en dos zonas. La zona

superior muestra el código

fuente, y la inferior el editor

visual. Cuando se realiza un

cambio en alguna de las zonas,

este cambio se aplica

directamente sobre la otra

Vista previa en el

explorador

Práctica del día:

Abrir la página de

la autobiografía, y

trabajar

con las diferentes

Vista de

Dreamweaver

LECCION 3

Tema: Configuración de un Sitio Web

Obj: Conocer y configurar un Sitio Web.

Un sitio web es un conjunto de archivos y

carpetas, relacionados entre sí, con un diseño

similar o un objetivo común.

Pasos para crear un Sitio Web.

1

2

3 Asignar un nombre

4

5Especificar el

lugar donde se

va a almacenar

Especific

ar

la

carpeta

6

7

9

10

Completado

Trabajar con el Sitio.

Seleccionar el Sitio y dar clic en el botón

Listo

PRACTICA DEL DIA:

CON LOS PASOS EN LA LECCION.

CREAR UN SITIO WEB

Las características del texto

seleccionado pueden ser definidas a través

del inspector de propiedades.

y a través del menú Texto,

Lección 4

Es posible insertar texto a modo de lista. A su

vez, la lista puede ser numerada o con viñetas.

Para que un texto que ya ha sido introducido

en el documento se convierta en una lista,

simplemente hay que seleccionarlo y pulsar

sobre la opción de lista correspondiente, ya sea

a través del inspector de propiedades, o a

través del menú Texto.

La lista con viñetas (desordenada) se

selecciona a través del botón , mientras que

la lista numerada (ordenada) se selecciona a

través del botón .

En la ventana Propiedades de lista se

puede especificar el tipo de lista (con

números o con viñetas), el tipo de números o

viñetas que se utilizarán (en la

propiedad Estilo:), y en el caso de las listas

ordenadas, el número por el que comenzará

el recuento.

Listas

A veces necesitarás

introducir caracteres

especiales en tus páginas.

Caracteres Especiales

Con Dreamweaver CS3, las características que apliquemos a un texto crearán automáticamente estilos

CSS que se incrustarán en el documento actual y se aplicarán únicamente sobre él.

Veámoslo:

Para crear un Estilo CSS personalizado:

1. En el documento, se selecciona el texto al que se desea aplicar características concretas.

2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen

los atributos de la fuente y del párrafo que queramos.

Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... según

los nombres de los estilos ya creados.

Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

Crear un Estilo Personalizado

PRACTICA DEL DIA:

En la página de la Autobiografía dar formato al documento y crear

una lista de las actividades que más te agreden en casa.