I.E.

Presentacin de Mara
Familia Profesional
: Computacin e Informtica
Especialidad
: Operacin de Computadoras
Mdulo: Diseo Web
Grado y Seccin :
Fecha

HOJA DE INFORMACIN N 4
TEMA
: INTRODUCCIN AL PROGRAMA ADOBE DREAMWEAVER MI
PRIMERA PGINA WEB
CAPACIDAD :
Crea su primera pgina Web, reconociendo y configurando el
entorno de trabajo de Dreamweaver e insertando objetos como textos,
tablas, imgenes, listas y anclajes.

QU

ES

D R E A M W E AV E R ?

Adobe Dreamweaver es un editor de cdigo HTML para la

administracin de sitios y creacin de pginas web.
Permite disear sin escribir una sola lnea de cdigo. Este
programa inicialmente fue creado por la empresa
Macromedia, actualmente se produce por Adobe Systems.
Recopilacin de algunas versiones de Dreamweaver
desde sus inicios:
Proveedor
Requisitos
para
instalar el programa
DW CS5, en el caso
que
tengas
S.O.
Windows:

Macromedia

2.0
3.0
4.0
6.0
7.0

Procesador Intel
Pentium 4 o AMD
Athlon 64 bits.
Microsoft Windows
XP con Service Pack 2
(se recomienda Service
Pack 3); Windows Vista
o Windows 7.

Versi
n
1.0

8.0
Adobe

9.0 /

Fecha de
publicacin
Marzo de 1998

Diciembre de 1998
Diciembre de 1999
Diciembre de 2000
29 de mayo de 2002
10 de septiembre de
2003
13 de septiembre de
2005
16 de abril de 2007

Notas
Primera
versin para
Windows.

Creative

Responde:

512 MB de RAM

Cmo puedes saber las caractersticas de tu

computadora para poder instalar DW?

1 GB de espacio
disponible en disco duro
para la instalacin

..........................................................................................

Pantalla de 1280 x 800

con adaptador de
grficos de 16 bits

..........................................................................................

Unidad de DVD-ROM
Se requiere una

Segn lo mostrado en la TV qu elementos puedes

insertar en un sitio o pgina web?

..........................................................................................
1

INGRESANDO A DW
1.
2.
3.
4.

Haz clic en Inicio

En la zona de bsquedas escribe Dreamweaver
Haz clic en el cono verde que aparece
Clic en soy nuevo, lee lo que sale y coloca Siguiente, siguiente hasta que salga el botn
finalizar.
5. Una vez dentro del programa vers una ventana con varias opciones
6. Haz clic en HTML.
7. A continuacin vers una ventana parecida al siguiente grfico, que es el entorno de
trabajo de DW.

ELEMENTOS

DEL

ENTORNO

DE

TRABAJO

DE

DW

1. Barra de ttulo: muestra el nombre del programa y los botones de control (Maximizar,
minimizar y cerrar).
2. Barra de men
3. Barra insertar: contiene botones para la insercin de objetos (imgenes, tablas, etc.)
4. Barra de herramientas del documento: Contiene botones para la vista diseo y la
vista cdigo, opciones de visualizacin y la vista previa en un navegador.

Vista cdigo, dividir o Diseo? .Completa

5. Grupo de paneles: conjunto de paneles agrupados bajo un encabezado los cuales se

pueden desplegar y contraer.

Haz clic para desplegar

Haz clic para contraer

panel no es visible haz clic en el men ventana y selecciona el nombre del panel.

6. Regla Horizontal y Vertical: permite medir las dimensiones de la pgina web, las
cuales estn expresadas en pxeles.

7. Ventana del documento: zona blanca en la cual se insertaran las imgenes, texto,
etc.

8. Selector de etiquetas: Muestra la jerarqua de etiquetas que rodea a la seleccin

actual.

9.

Panel de propiedades: Muestra las propiedades del

QU

ES

UN SITIO WEB?

objeto o texto seleccionado y permite a la vez modificar dichas propiedades.

Es un conjunto de documentos y archivos vinculados, con un
diseo similar y un objetivo en comn. En DW el trmino sitio se
emplea para referirse a una ubicacin de almacenamiento local
3
o remoto de los documentos (Imgenes, pginas html, videos,
audio, etc.) que pertenecen a un sitio web. Un sitio permite
organizar y administrar todos los documentos web, cargar el

El primer paso al crear un sitio web consiste en planificarlo; es decir,

disearlo y planificar la estructura del sitio web antes de crear las
pginas que va contener. Luego el siguiente paso consiste en configurar
DW para poder trabajar con la estructura bsica del sitio. Si ya se
dispone de un sitio en un servidor web podemos utilizar DW para

Pasos para crear un sitio local:

SEGUNDO PASO

Configurar el Sitio Web

PRIMER PASO

Crear la estructura de
carpetas, en tu escritorio
Copia las imgenes que la
profesora que va a dar a tu
carpeta Imgenes.

1. Clic en Sitio (Se encuentra en

la barra de men)/ Nuevo Sitio
2. Aparece una ventana en la
cual debes escribir el nombre
que tendr tu sitio
3. Luego define la Carpeta o sitio
local (Elige la carpeta que
creaste en el Primer Paso)
4. Clic en Guardar.

Una vez creado el sitio vers que se activa el panel archivos, este
panel se utiliza para crear documentos HTML; ver, abrir y mover
archivos; crear carpetas y borrar elementos. Los elementos que
componen un sitio se visualizan en el panel archivos.
Ejercicio: Escribe el texto que se muestra a la derecha, luego
configura las propiedades que se muestran abajo.

Propiedades del documento o pgina

Ingresamos a propiedades del documento o pgina de dos formas:
a. En la vista diseo, buscamos un espacio vaco en el
documento y hacemos clic derecho, luego se escoge
propiedades de la pgina. Aqu podemos hacer las
modificaciones deseadas.
b. En el panel propiedades busca un botn denominado
Propiedades de la pgina y haz clic sobre l. Vers aparecer
una ventana donde podrs hacer los cambios al
documento.

LAS PLANTAS
Son seres que nacen,
crecen se reproducen y
mueren
Partes de las Plantas
Raiz
Tallo
Hoja
Flor
Fruto

Ejercicio: Ingresa a propiedades de la pgina y realiza los siguientes cambios.

4

Gestin de archivos y carpetas.

Para abrir un archivo:
1. En el panel archivos selecciona un sitio
2. Localiza y selecciona el archivo que deseas abrir
3. Haz doble clic en el cono del archivo/ o haz clic derecho y
elige abrir.
Para crear un archivo o carpeta:
1. En el panel archivos selecciona una
carpeta.
2. Clic derecho sobre la carpeta y
selecciona la opcin nuevo archivo o
nueva carpeta
3. Escribe el nombre para el nuevo
archivo o carpeta y luego presiona
enter.
Otra forma: (Clic en Men Archivo/Nuevo/Clic en
HTML/Clic en Crear)

Para eliminar un archivo o carpeta:

1. Clic derecho sobre la carpeta o archivo
2. De las opciones escoge Edicin luego
clic en Eliminar.

Para guardar un archivo:

1. Clic en archivo (Se encuentra
barra de men)
2. Escoge Guardar como
3. Ubica la carpeta configurada
sitio local
4. Escribe el nombre del archivo y
en la opcin Tipo escoge
Documents.
5. Clic en guardar.

en la

como
luego
HTML

Si ya has guardado anteriormente el

archivo y deseas solo guardar0 los
cambios realizados pulsa las teclas
CTRL+S

Otra forma: Clic en el archivo o carpeta luego presiona

la tecla suprimir.

Mi primera pgina web.

Qu significa la interactividad lineal?
La palabra interactividad implica el enviar una orden y que la computadora te proporcione
una respuesta. En el caso de las pginas web la interactividad lineal est referida a los
vnculos que se realizan a la misma pgina pero te direcciona a partes especficas puede
dirigirte hacia arriba, abajo, o en el intermedio de la pgina dependiendo del anclaje
insertado.
CREAR LISTA SIN ORDENAR (VIETAS)
1. Escribe los elementos de la lista
2. Seleccinalos y luego en el panel
propiedades haz clic en el botn HTML
3. Clic en el botn Lista sin ordenar.

CREAR
LISTA
(NUMERACIN)

ORDENADA

Escribe los elementos de la lista

1. Seleccinalos y luego en el panel
propiedades haz clic en el botn HTML
2. Clic en el botn Lista ordenada

INSERTANDO TABLAS
5

1. Haz clic en Insertar, de la barra de men

2. Escoge tabla
3. Define el nmero de filas y columnas, como tambin
grosor.
4. Clic en Aceptar.

Selecciona las celdas a

combinar y en el panel
propiedades
vers
el
siguiente botn haz clic
sobre l.

Para dividir celdas,

solo debers hacer clic
en este botn.

INSERTAR IMGENES
1. Primero
debes
buscar
las
imgenes para tu sitio desde
internet u otro medio
2. Descarga las imgenes a la
carpeta IMAGENES que debe
estar dentro de tu sitio creado.
3. Clic en el men Insertar
4. Elige Imagen
5. Clic en la imagen deseada y clic
en Aceptar.
6. Listo.

Actividad: Crea esta tabla y aplcale formato

Partes de las Plantas
RAIZ
TALLO
HOJA
FLOR
FRUTO

Nota: Puedes modificar la ubicacin y espacio de separacin entre la imagen y texto a

travs del panel de propiedades
INSERTAR LNEA HORIZONTAL
1. Coloca el cursor donde quieres que aparezca la lnea horizontal (En este caso, debajo del
ttulo)
2. Clic en Insertar
3. Clic en Regla Horizontal
4. Si quieres que se vea ms gruesa, en propiedades aumenta el alto a 15
5. Tambin puedes cambiar el color de la lnea utilizando la vista cdigo.
<hr
size=15 color=red>
LA ETIQUETA MARQUEE: Esta etiqueta permite dar movimiento al texto
1. Selecciona el ttulo
2. Clic en la vista dividir
3. Busca el texto seleccionado y antes de ese texto escribe <marquee behavior=alternate>
y al finalizar </marquee>
Se debe ver as: <marquee behavior=alternate> LAS PLANTAS </marquee>
ACTIVIDAD:
1. Ahora crea una pgina Web para explicar la clasificacin de las plantas segn su
tamao (rbol, arbusto, hierba)
a) Agrega textos.
b) Inserta una lnea horizontal que separe el ttulo del contenido
c) Crea Vieta
d) Crea tablas
CLASIFICACIN DE LAS PLANTAS SEGN SU TAMAO
e) Inserta imgenes
f) Aplica formatos
Segn esta clasificacin podemos encontrar tres grandes
g) Aplica color de fondo
clases de plantas, de mayor a menor:
2.
rbol
Arbusto
Hierba
rbol
Imagen
Texto

Clasificacin de las Plantas

Arbusto
Hierba
Imagen
Imagen
Texto
Texto

TEMA
: INTRODUCCIN AL PROGRAMA ADOBE DREAMWEAVER MI
PRIMERA PGINA WEB
CAPACIDAD : Crea su primera pgina Web, reconociendo y configurando el entorno de
trabajo de Dreamweaver e insertando objetos como textos, tablas,

A A D I E N D O A N C L A J E S ( P G I N A D E I N T E R A C T I V I D A D
LINEAL)
Qu es un anclaje?
Un anclaje es una marca que indica donde
se encuentra un objeto sirve para
establecer una conexin hacia la misma
pgina.
Pasos para aadir anclajes
PRIMERA PARTE: Creacin del anclaje
Primero disea tu pgina Web sobre las
plantas (Pero esta pgina Web si es completa)
Observa el modelo de la separata virtual
Modelo de pgina con anclajes
a) Selecciona el texto LAS PLANTAS de
la primera tabla
b) Clic en vista dividir
c) Aadirs la etiqueta article antes del
texto LAS PLANTAS y cerrarlo
despus del texto LAS PLANTAS
Debe verse as:
<article id="definicion"> LAS PLANTAS
</article>
Nota: El id es el nombre del anclaje
Contina aadiendo ms anclajes
Partes de una planta Destino partes
Clasificacin de las plantas Destino clasificacion
Importancia de las plantas Destino importancia
Tipos y formas de hojas Destino tipos
Biodiversidad Destino biodiversidad

SEGUNDA PARTE: CREACIN DE UN HIPERVNCULO HACIA EL

ANCLAJE

s sencilla.
xto que se encuentra en el ndice Qu son las Plantas?
ropiedades, en la zona de vnculo escribe # seguido del nombre del id del anclaje que has creado, en este ca
Contina aadiendo los vnculos a los dems textos del ndice

Actividad:
Elige un tema libre, y desarrolla una pgina Web sobre ese tema. Debers aplicar
todo lo aprendido.
1. Primero crea tu carpeta de archivos
2. Luego Configura tu Sitio Web
3. Finalmente procede con la creacin de tu pgina Web (Aplica todo lo
aprendido: Tablas, imgenes, formatos)
Pero