PDF de programación - PRACTICAS CON DREAMWEAVER

PRACTICAS CON DREAMWEAVER



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 programar manualmente 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 que hacerlo 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
incluye, es Macromedía
las numerosas funciones que
Dreamweaver.


Conceptos básicos de DREAMWEAVER



Cuando entramos a Dreamweaver lo primero que vemos es esta pantalla:


Cuadro de

Herramientas:



para insertar
imágenes,

hipervínculos,

capas, barras,

menús
desplegables, etc



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

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.

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



también


Desde aquí se puede
poner
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:

CREAR PÁGINAS WEB CON DREAMWEAVER

COLOR
AZUL

Muchas de las imágenes que vemos en 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



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

TIPO DE LETRA
(seleccionar el tipo

COLOR DE

ARIAL)

LETRA

CURSIVA

ALINEACIÓN DEL
TEXTO: Izquierda,
Centrada o Derecha



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 a crear 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 dentro de dicha carpeta, mientras que para contener
las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de
ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar.
Es muy importante que la página principal del sitio tenga el nombre index.html, ya que los
navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.
Por ejemplo, si escribiéramos la dirección genérica http://www.petrer.es/ en el navegador, éste
intentaría cargar la página http://www.petrer.es/index.html, por lo que se produciría un error
en el caso de que no existiera ninguna página con el nombre index.html



Crear o editar un sitio web


Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en
Dreamweaver. Para ello hay que seguir los siguientes pasos:
1) Deberéis tener creada dentro de vuestra carpeta de alumno una carpeta llamada “DREAM”

2) Dirigirse al menú Sitio, a la opción Nuevo sitio. Allí veremos la siguiente pantalla:


3) Ahí introduciremos los
siguientes datos:

- Donde pone Nombre del
sitio pondremos “Sitio web
de “vuestro nombre”

- En la Carpeta raíz local
seleccionaremos la carpeta
DREAM que previamente
hemos creado.



Cuando aceptemos nos aparecerá una nueva ventana que será el sitio web. En ella habrán dos
columnas. En la de la derecha veremos la lista de páginas web que tiene nuestro sitio, y en la

izquierda veremos la estructura de árbol que va adoptando nuestro sitio web. Esta ventana la
dejaremos minimizada porque en ella podremos ir viendo la estructura que tiene la página.

4) Ahora nos vamos a la otra ventana, la que está toda en blanco y vamos a definir tal y como
hicimos en la práctica anterior las propiedades de la página (se hacía pulsando con el botón
derecho y seleccionando la opción Propiedades de página). Introduciremos los siguientes
valores:

- Titulo: “Primera página del sitio web”
- Color de fondo: “Azul claro”


5) Utilizando los elementos de la barra de propiedades, escribir el siguiente texto en la página
que tenéis abierta:


Obtener ayuda del menú de ayuda

Sólo tiene que hacer clic en Ayuda de Microsoft Word, en el menú de ayuda. Si el
Ayudante está activado, aparecerá en pantalla. Si el Ayudante está desactivado, aparecerá la
ventana de ayuda. Para escribir una pregunta en la ventana de ayuda, haga clic en la ficha

Asistente para Ayuda. Para desplazarse por una tabla de contenido de la ayuda, haga clic en

la ficha Contenido. Cuando desee buscar palabras o frases específicas, haga clic en la ficha

Índice.



Formato: Permite poner encabezados al texto seleccionado
Fuente:
Permite cambiar tipo de fuente del texto
seleccionado.



Tamaño: Permite cambiar el tamaño del texto seleccionado.

Permite cambiar el color del texto seleccionado.

Color:
Estilo: Permite cambiar el texto seleccionado a negrita / cursiva.
Alinear: Permite alinear el texto seleccionado a la izqda., centrado, dcha.

Lista:

Permite crear listas para el texto seleccionado

Sangria:

Permite establecer sangrías para el texto seleccionado



6) Guardar la página con el nombre ‘index.html’ dentro del sitio web DREAM



Práctica 3 - Introducción a DREAMWEAVER



Configuración de un sitio local (II)



1) Vamos a crear dos páginas web nuevas, para ello nos vamos al menú Archivo /
Nuevo.


- La primera la guardaremos con el nombre “prueba1.htm” dentro del sitio web

DREAM y dentro tendrá el siguiente texto:

“Texto de la página prueba1.htm”

- La segunda la guardaremos con el nombre “prueba2.htm” dentro del sitio web

DREAM y dentro tendrá el siguiente texto:

“Texto de la página prueba2.htm”

2) Ahora vamos a abrir la página “index.html”y en ella escribiremos al final de la
página el siguiente texto:


Acceso a prueba1
Acceso a prueba2



Queremos establecer hipervínculos para que cuando pulse sobre ‘Acceso a prueba1’ pase a la
página prueba1.htm. El proceso para realizar esto es muy sencillo:

- Seleccionar la frase ‘Acceso a prueba1’ y pulsar sobre el botón de la barra de propiedades.



- Se abrirá una ventana donde especificaremos el destino del hipervínculo. En este caso
seleccionaremos la página ‘prueba1.htm’

- Realizar este mismo proceso con ‘Acceso a prueba2’ y guardar los cambios


Vistas del sitio

Es posible visualizar un sitio en el panel Sitio o en una ventana. El panel Sitio se puede abrir a
través del menú Ventana, opción Sitio. También pulsando F8 o sobre el botón
del
lanzador.

3) Vamos a hacer la prueba con nuestro sitio web DREAM. Si todo ha ido bien hasta el
momento deberíamos tener 3 páginas web: index.html, prueba1.htm y prueba2.htm.


- Pulsaremos sobre el botón y nos debería
quedar algo como esto:




En esta imagen se visualizan el mapa del sitio y el sitio local.
En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento index.html,
ya que éste ha sido definido como página principal del sitio y contiene vínculos hacia los otros
dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de
Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no
funcionarán enlaces, etc.

En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a través del
sitio, es posible actualizar automáticamente l