dremwever

Prácticas guiadas para el
diseño web con
Dreamweaver MX

Luis Escandell Gómez
Enero de 2.007

Práctica 1 - Introducción a DREAMWEAVER
¿Qué es Dreamweaver?
Dreamweaver es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y
funcionalidad a las páginas, sin la necesidad de programarmanualmente el código HTML.

Editar páginas web
Tal y como ya hemos visto, 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.
Pero crear páginas web mediante el código HTML es más
costoso quehacerlo utilizando un editor gráfico. Aunque es
necesario conocer algo de HTML para poder hacer páginas de
cierta calidad.
Hoy en día existe una amplia gama de editores de páginas web.
Uno de los más utilizados, y que destaca por su sencillez y por
las numerosas funciones que incluye, es Macromedía
Dreamweaver.

Conceptos básicos de DREAMWEAVER
Cuando entramos a Dreamweaver lo primero quevemos es esta pantalla:

Cuadro de
Herramientas:
para insertar
imágenes,
hipervínculos,
capas, barras,
menús
desplegables, etc

Barra de propiedades: en ella tenemos las
propiedades de cada uno de los elementos de
nuestra página web. Por ejemplo si
seleccionamos un texto desde ahí podemos
cambiar el tipo de letra, el tamaño, la
alineación, ponerle un hiperenlace, etc.

1) Esta vaa ser nuestra primera página web. Lo primero va a ser ponerle un título. Para ello vamos a
seguir los siguientes pasos:

-

Pulsar con el botón derecho sobre cualquier parte de la hoja en blanco y seleccionar la
opción “Propiedades de la página”.

-

Aparecerá la siguiente ventana, en ella pondremos el título que tenemos aquí y como color
de fondo pondremos el naranja.

Desde aquí sepuede
poner
también
una
imagen como fondo de
pantalla si quisiéramos,
se hace seleccionándola
desde aquí

2) Hasta ahora deberíamos tener una página web donde arriba del todo ponga el título que
hemos introducido y como color de fondo tengamos el color naranja. Ahora vamos a introducir
el siguiente texto:
COLOR
CREAR PÁGINAS WEB CON DREAMWEAVER
AZUL
Muchas de las imágenes que vemosen Internet se pueden copiar al disco duro. Al
hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de
Internet, se abre una ventana con una opción similar a Guardar imagen como...
(dependiendo del navegador que utilices) que permite grabar dicha imagen en un
fichero de nuestro disco duro.

3) Para conseguir los efectos que hay en el texto que acabas de copiar(negritas, letras
en colores, cursivas, etc) se debe recurrir a la ventana de propiedades. Para ello
seleccionaremos el texto deseado (por ejemplo: “botón derecho del ratón” debe ir en
negrita) y se pone pulsando sobre

TIPO DE LETRA
(seleccionar el tipo
ARIAL)

COLOR DE
LETRA

CURSIVA

ALINEACIÓN DEL
TEXTO: Izquierda,
Centrada o Derecha

4) Crear dentro de vuestra carpeta de alumnouna carpeta llamada DREAM y dentro guardar
esta página con el nombre “pagina1.htm”

Práctica 2 - Introducción a DREAMWEAVER
Configuración de un sitio local (I)
Un sitio web es un conjunto de archivos y carpetas, relacionados entre si, con un diseño
similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las
páginas que va a contener.
Por ejemplo si vamos acrear una página web sobre un equipo de fútbol, lo primero es crear un
sitio web (por ejemplo que se llame fútbol) y dentro de ese sitio ya irán las diversas páginas que
formen parte de él. Como por ejemplo presentacion.htm, palmares.htm, plantilla.htm, etc.
La forma habitual de crear un sitio web consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean...