Capacitacion 6 (Dreamweaver)

ESCUELA PREPARATORIA
“LIC. SALOMÓN GONZÁLEZ BLANCO”
NOMBRE: GRADO:
GRUPO: TURNO:
PAGINAS WEB (DREAMWEAVER MX 2004) 2017
01.- INSTALAR EL PROGRAMA.
El primer paso es conseguir el programa Dreamweaver en su versión MX

2004 e instalarlo en la PC.
Al instalar el programa es aconsejable aceptar todo lo que la instalación

elija por defecto para no interferir en las presentaciones y en los sitios de
ubicación de los archivos y documentos.
02.- ABRIR EL PROGRAMA.
Una vez instalado, lo encontramos en la ruta (Windows XP) Inicio > Todos
los programas > Macromedia > Macromedia Dreamweaver MX 2004
.
Al abrirlo por vez primera aparece este mensaje de configuración del
espacio de trabajo. Elegimos Diseñador.
Página 2
Aparecerá la siguiente interfaz:
Antes de continuar, es importante que te familiarices con las columnas y

fragmentos de filas que se hacen visibles o no, pinchando en los
correspondientes iconos. Para ocultar la columna de la derecha se le da al
icono . Para recuperar su vista se le da a
Tanto en la columna derecha, más estrecha, como en la izquierda, más

ancha, hay fragmentos de filas que se muestran o se ocultan pinchando en el
nombre. Por ejemplo podemos ocultar el panel de Propiedades pinchando en
. Para volverlo a recuperar, pinchamos en
03.- CREAR EL SITIO.
Lo primero que tenemos que hacer es crear una carpeta que será la carpeta
en la que guardemos todas nuestras páginas, y todos los archivos que
vayamos añadiendo, es la carpeta raíz del sitio. La podemos tener
previamente creada o crearla a partir del Dreamweaver. Si tenemos dos
Página 3
particiones en el disco duro del ordenador, elegimos la parte destinada a
datos. Le damos a Sitio > Administrar sitios...
Aparecerá el siguiente cuadro de diálogo:
Le damos a Nuevo... > Sitio
Aparecerá momentáneamente este cuadro de diálogo:
Página 4
Para, automáticamente, saltar a éste otro: (en el caso de que no salte

automáticamente, se le da al botón Editar...)
Pinchamos en la pestaña Avanzadas: Ver nota 1
Página 5
Lo primero que hacemos es poner un nombre al sitio. Por ejemplo, Mi primer

sitio y, acto seguido, pinchamos en la carpeta de Carpeta raíz local. Nos
vamos a un disco duro, por ejemplo D
Pinchamos en para crear una nueva carpeta y le ponemos como nombre

mi_primer_sitio (nombre sin espacios vacíos, sin acentos, sin caracteres
especiales, preferiblemente minúsculas).
Página 6
Hacemos doble clic en Abrir:
Y, después en Seleccionar:
Página 7
Observa que ya tenemos definido el sitio con un nombre Mi primer sitio y

en una carpeta mi_primer_sitio. Ver nota 3. Le damos a Aceptar:
Y, luego a Listo.
Observa el lateral derecho de la interfaz:
Aparece abierto el sitio Mi primer sitio que está alojado en

la carpeta mi_primer_sitio dentro del disco duro D
Página 8
04.- CREAR EL PRIMER DOCUMENTO.
Para crear la primera página (el primer documento) podemos, simplemente,

hacer clic en Crear nuevo > HTML en el "tablón de mandos" que aparece en
el espacio central principal.
Aparecerá nuestro primer documento que, a falta de guardarlo con un

nombre, Dreamweaver lo llama Untitled-1
Pero este tablón de mandos no siempre va a estar visible. El mejor método

es hacerlo por medio de Archivo > Nuevo...
Aparecerá este nuevo cuadro de diálogo. Elegimos Página básica y HTML y

pulsamos en el botón Crear
Página 9
Y llegaremos al mismo sitio ya explicado, un Untitled-1 listo para

convertirse en nuestra primera página.
Procedemos, a continuación, a su guardado. Le damos a Archivo > Guardar
Dreamweaver procederá a guardar el documento en la carpeta raíz del sitio
Página 10
Como va a ser el primer documento del sitio, podemos llamarlo index.htm
Pulsamos el botón Guardar. Observa cómo se ha incorporado el nombre del

archivo en la pestaña superior.
Y observa también cómo se ha colocado el archivo en la barra lateral

derecha de la interfaz:
Página 11
A continuación, procedemos a poner un título al documento:
Los títulos de los documentos se pueden (y se deben) escribir con la normas

de ortografía habituales del idioma. Es un tema importante: Aparecerá en la
barra superior de navegación, es el nombre con el que la página se guarda en
Favoritos o en Marcadores y es, también, el nombre con el que los
buscadores encuentran una determinada página.
Pulsamos la tecla F12 para hacer saltar al navegador. Si no hemos guardado

la página previamente, nos preguntará:
Le decimos que Sí y vemos nuestra página:
Se ha cargado en el FireFox de Mozilla (se cargara en el que tengas como

predeterminado) pero debemos probar siempre nuestras páginas con, al
menos, otro navegador. Por ejemplo el Explorer. Cargo la página en el
Explorer:
Página 12
05.- A PONER ALGO EN EL DOCUMENTO
Simplemente empezamos a escribir en el espacio vacío.

Le damos un "enter" para saltar de línea.
Para dar formato al texto, disponemos de las herramientas que aparecen en

el Inspector de Propiedades:
Si este panel está oculto es porque está en esta posición:
Página 13
Observa la cabeza de flecha apuntando hacia la derecha. Haciendo un clic, la
cabeza de flecha apuntará hacia abajo y el panel se desplegará como en la
situación anterior.
Para efectuar los cambios que necesitemos, tendremos que seleccionar

previamente el texto que queramos modificar:
He seleccionado la primera palabra. Le he aplicado un Encabezado 1, lo he

centrado, no he cambiado el tipo de fuente, ni el tamaño (ya lo hace al ser
encabezado de orden 1) y he elegido el color rojo. En estos momentos,
Dreamweaver le ha puesto un nombre a esta selección de formatos: Estilo 1
Modifico ahora la segunda frase:
Página 14
Ahora he puesto en negrita, centrado, he cambiado el tipo de fuente, he
puesto como tamaño grande y he elegido ese color. Dreamweaver le ha
puesto como nombre Estilo 2.
Observa que, mientras hacemos algún cambio y no guardamos, aparece un

asterisco en la pestaña que nos indica el documento que tenemos abierto:
Lo guardamos con Archivo > Guardar
Y el asterisco desaparece:
Conviene guardar cada cierto tiempo por lo que pueda pasar...
Página 15
Vamos ahora a poner un color de fondo. Pinchamos en el botón Propiedades
de la página... del Inspector de propiedades y se abre el cuadro de
diálogo:
Pinchamos en Color de fondo y elegimos uno:
Se habrá colocado en su sitio:
Le damos a Aceptar:
Página 16
Guardamos y cargamos en el navegador con la tecla F12:
Lo cargo en otro navegador. Esta vez el Mozilla:
06.- COMPROBAR SIN F12
Lo he dado por supuesto en los párrafos anteriores al decir "cargar la

página con otro navegador". A veces puede ocurrir también que la tecla F12
no funciona. En este caso, vamos con el Explorador de Windows a la carpeta
Página 17
donde está guardado el documento, en mi caso, en la carpeta
mi_primer_sitio dentro del disco duro D:
Hacemos doble clic en la carpeta para abrirla:
El icono que acompaña al archivo es el del FireFox (mi navegador

predeterminado). Haciendo doble clic sobre el icono se abrirá el documento.
Página 18
Si lo queremos abrir con otro navegador, una posibilidad es pinchar con el
botón derecho del ratón y elegir Abrir con...
O bien, abrir el navegador y buscar el archivo. Por ejemplo, abro el Mozilla y

le doy a Abrir archivo...:
Y me muevo por los discos y carpetas hasta encontrar el archivo que quiero
abrir:
Página 19
07.- SALIR Y VOLVER A ENTRAR
Cuando queramos salir del editor, guardamos el trabajo realizado, Archivo >
Guardar y cerramos con el botón del extremo superior derecho:
Para volver a abrir, le damos a Inicio > Todos los programas > Macromedia >
Macromedia Dreamweaver MX 2004) y se abrirá el editor con el sitio que
hayamos empleado por última vez. Si sólo tenemos uno, el nuestro, pues con
el nuestro:
Haciendo doble clic en el icono se abrirá el documento para poder

seguir trabajando:
Página 20
En el caso de que haya más de un sitio definido por nosotros (o por otros
usuarios), entonces hay que pillar primero el sitio pinchando en la flechita
de la columna de la derecha:
En la imagen vemos nuestro sitio Mi primer sitio en medio de otros ocho

sitios más. Simplemente lo seleccionamos y se abrirá el sitio con sus
archivos.
08.- PUBLICAR EL SITIO
Puede parecer un poco prematuro empezar ya a pensar en publicar nuestra

página.
Tal como la tenemos apenas tiene un saludo de bienvenida... Carece de
contenido y, por tanto, de interés. Pero este curso quiere hacer hincapié en
enseñar al interesado de manera minuciosa los pasos que, por experiencia,
están descuidados en otros cursos o manuales... Al alumno que está
aprendiendo le cuestan, fundamentalmente, los primeros pasos y los últimos.
Y, es en esos dos momentos, cuando necesita más ayuda. Así que vamos a
proceder a desarrollar los pasos necesarios para conseguir publicar nuestra
página.
08.1.- CONSEGUIR UN SERVIDOR QUE NOS LO ALOJE
Es la primera condición: conseguir un Servidor o Host que nos proporcione

un espacio para alojar la página.
Página 21
Hay algunos que son gratuitos pero, en contra, van a llenar las visitas a tu
página con publicidad no siempre suficientemente discreta. Uno de ellos es
Yahoo a través de Geocities.
Lo primero que hay que hacer es conseguir una cuenta de correo con Yahoo.
Una vez conseguida, hay que darse de alta en Geocities con el nombre de
usuario (ID) y la contraseña que te has creado en la cuenta de correo de
Yahoo.
Otra posibilidad son los espacios proporcionados por algunas empresas a sus
empleados, por las universidades a sus profesores y estudiantes, por las
consejerías de educación, por los ministerios,... Estos espacios son mejores
pues no tienen publicidad aunque, en algunos casos, no son de acceso
totalmente público...
Para los profesores de enseñanza no universitaria que trabajen en centros
públicos, una buena solución es solicitar una cuenta de correo (lleva asociado
un espacio web) al CNICE (antiguo PNTIC). Se rellena este formulario y se
envía por fax con la firma del director y el sello del centro educativo.
Tardan entre dos y tres semanas en enviarte la cuenta.
08.2.- ¿CUAL ES LA DIRECCIÓN URL?
Este ordenador servidor nos tiene que proporcionar unas claves para la
transferencia de los ficheros y la dirección en la cual se encontrará nuestra
página inicial.
En el caso de Geocities:
Supongamos que el nombre de usuario o ID es angelpuente56 (su dirección
de correo es angelpuente56@yahoo.es), pues bien, la dirección URL de su
página es http://es.geocities.com/angelpuente56/ y se visualizará siempre y
cuando su primera página se llame index.htm o index.html En caso de
llamarse pagina0.htm habrá que añadir a la dirección anterior, el nombre
del archivo inicial pagina0.htm Lo recomendable es llamar a la primera
página index.htm
Página 22
Esta es la imagen inicial de la primera página que, por defecto, crea
Geocities:
Cuando se mande al servidor el index.htm del propietario, esta primera

página de Geocities será sustituida por la creada por el usuario.
08.3.- TRANSFERENCIA DE FICHEROS
Podemos emplear un programa específico de transferencia de ficheros por

FTP (File Transfer Protocol o Protocolo de Transferencia de Archivos)
como el WS_FTP o el CUTE o el FileZilla (este último es software libre y
funciona muy bien). Pero no es necesario. El Dreamweaver es perfectamente
capaz de realizar la transferencia sin ningún problema.
08.4.- TRANSFERENCIA DESDE DREAMWEAVER
Lo que hay que hacer primero es configurar los datos del remoto. Para ello
hay que darle a Sitio > Administrar sitios
Página 23
Se abrirá la ventana de Administar sitios con todos los sitios que tengamos
definidos y con el que estemos trabajando, seleccionado.
Pinchamos en Editar...
Pero ahora nos interesan los Datos remotos:
Página 24
Ejemplo concreto. El de Geocities
08.4.1.- EN EL CASO DE GEOCITIES:
Desplegamos las posibilidades del Acceso, elegimos FTP y rellenamos los

datos del Servidor FTP, Directorio del Servidor (en el caso de Geocities no
hay que poner nada), el nombre de Usuario (la ID de Yahoo) y la Contraseña.
Seleccionamos Guardar y lo demás lo dejamos como está:
Pinchamos en el botón Prueba para comprobar que se conecta

correctamente. Aparecen estos mensajes:
Página 25
Aceptamos y le damos a Listo. Volvemos a nuestro sitio y nos fijamos en la

parte derecha:
Hacemos doble clic sobre los dos enchufes. Se intentará la conexión:
A veces, aparece este mensaje temporal:
Página 26
Cuando se haya producido la conexión, desaparecerán los mensajes, los

enchufes permanecerán enganchados y el piloto verde encendido. Y...
¡¡cuidado!! Dreamweaver se va automáticamente a la Vista remota.
Tenemos que volver a la Vista local:
Volvemos a nuestra Vista local:
Página 27
Seleccionamos el archivo que queremos transferir y pinchamos en la flecha

azul (colocar archivos)
Primero nos preguntará si queremos que mande también los Archivos

dependientes:
Los archivos dependientes son, fundamentalmente, las imágenes que lleva la

página. Es una opción muy valiosa que permite al DW ver las imágenes que
tiene el documento y enviarlas al servidor. En este caso como no tenemos,
da igual lo que digamos. Aparecerá, entre otros, el mensaje de la
transferencia del archivo:
Página 28
Cuando acabe, para ver si se ha producio correctamente la transferencia,

deberemos visitar la URL:http://es.geocities.com/angelpuente56/
09.- INSERTAR UNA TABLA
Las tablas son muy importantes para el diseño de una página web. Muchos de
los temas de colocación de elementos en un determinado punto del espacio,
se resuelven de manera correcta, empleando tablas. La tabla se puede
definir con un borde cero con lo que, podremos ocultarla, si no nos gusta
presentar los contenidos encorsetados dentro de los límites de las celdas.
Pero, insisto, nos habrá servido para colocar los elementos en los puntos,
más o menos, deseados.
Para insertar una tabla, le damos a Insertar > Tabla
Aparecerá un cuadro de diálogo como éste:
Página 29
Podemos definir, de entrada, el número de filas y columnas, el ancho que

ocupará en % o en píxeles, el grosor del borde, el relleno de celda o el
espacio en píxeles que hay desde el borde de la celda al comienzo de los
datos, sea escritura o imagen.
El espacio entre celdas es lo que indica el nombre, definido en píxeles

también. Los encabezados son un preformateado de las celdas elegidas para
escribir con caracteres enfatizados y centrados. El resto, no lo
consideramos de momento.
A modo de ejemplo vamos a insertar una tabla con 3 filas y 6 columnas y

que ocupe el 80 % del ancho, un borde de 2 píxeles y un relleno de celda
de 5 píxeles y sin encabezado:
09.1.- MODIFICAR LA TABLA
Si colocamos el cursor en una de las celdas, el Inspector de Propiedades

tendrá un aspecto similar a éste:
Página 30
Lo que hay por encima justo del panel del Inspector de Propiedades son las
etiquetas del lenguaje HTML que veremos más adelante. De momento,
indicar que la etiqueta <body> (de body, cuerpo) hace referencia a todo el
documento que se visualiza con el navegador. La etiqueta <div> (de division,
división) hace referencia a una división o un espacio acotado en el que se
pueden situar determinados elementos.
La etiqueta <table> (de table, tabla) hace referencia a la tabla entera, la

etiqueta <tr> (de table row, fila de la tabla) a la fila en la que está el cursor
y la etiqueta <td> (de table data, o datos de la tabla) a la celda. Observa
que la última etiqueta está marcada. Eso quiere decir que es la celda la que
está seleccionada y todo lo que ponga en el Inspector de Propiedades será
con referencia a esa celda.
Si queremos centrar la tabla, la seleccionamos pinchando con el cursor en

cualquier punto interno y presionando la etiqueta <table>
. La tabla quedará marcada con un borde de color negro
con unos cuadraditos (tiradores) en los puntos medios de los lados laterales
derecho e inferior:
Página 31
Una vez seleccionada, observa que el Inspector de Propiedades está

relacionado con la tabla. Allí selecciona Alinear > Centro
La tabla quedará alineada al centro:
Lunes Martes Miércoles Jueves Viernes
Mañana
Tarde
Vamos a observar el resto de valores del panel del Inspector de

Propiedades:
En Id de tabla podremos poner un nombre a la tabla. Posteriormente,

cuando la seleccionemos, DW la llamará con su nombre en la etiqueta.
Aunque no es un tema importante, vamos a hacer una prueba. Si la llamo uno,
por ejemplo, observa la etiqueta que aparece por encima del panel:
Página 32
Puedo cambiar el número de filas y el de columnas. Establecer un ancho y un

alto diferentes (en % o en píxeles). Cambiar los rellenos de celda y los
espacios entre celdas, alinear diferente, cambiar el borde. En la parte
inferior, dejamos los iconos de la izquierda de momento y observamos el
Color de Fondo, el Color del borde y la imagen que puedo colocar como
fondo de la tabla.
Vamos a hacer algún cambio en la tabla:
Hemos añadido una fila, incrementado el grosor del borde a 5 píxeles,

establecido un color de fondo y otro diferente para el borde. El resultado
es éste:
Mañana
Tarde
Página 33
Podemos hacer cambios a una celda concreta, a una fila entera, o a la tabla
entera como acabamos de ver.
Para hacer cambios a una fila, colocamos el cursor en una celda de esa fila y
marcamos la etiqueta <tr> de la barra de estado. Quedará seleccionada la
fila entera. Desde el panel Propiedades podemos hacer los cambios
oportunos:
Observa el aspecto del panel Inspector de Propiedades:
Si, por ejemplo, pulsamos en y en el texto escrito en la fila se colocará

centrado en cada celda y en negrita:
Mañana
Tarde
Página 34
Otra forma de seleccionar filas o/y celdas consiste en situar el cursor en
una de las celdas y arrastar con el ratón hasta donde se desee:
Hemos seleccionado las cuatro celdas intermedias de la última fila. Si le

damos, por ejemplo al icono las celdas seleccionadas se agruparán en una
sola:
Mañana
Tarde
Hemos seleccionado por el método de arrastrar el cursor, las celdas

siguientes para cambiar el color de fondo:
Página 35
Éste es el resultado:
Mañana Aula 1 Aula 2 Aula 1 Aula 2 Aula 1
Tarde Aula 1 Aula 3 Aula 1 Aula 2 Aula 1
Noche Tiempo libre Fiesta final
Para hacer que el ancho de cada columna permanezca fijo y uniforme,

primero pienso cuánto puede ser el % . Por ejemplo, 10% para la primera
columna y 15% para las otras seis (tienen que sumar el 100% de la tabla,
aunque ésta sea el 80% de la pantalla).
Pongo el cursor dentro de la primera celda y, en la casilla An escribo 10%
(todo seguido sin espacio). Paso a la segunda celda y escribo 15% y asi hasta
el final...
Resultado:
Página 36
Fiesta
Noche Tiempo libre
final
10.- IMÁGENES
Para insertar una imagen es conveniente tenerla previamente guardada en la

carpeta del sitio. De lo contrario Dreamweaver nos advertirá para que lo
hagamos.
Las imágenes pueden estar sueltas en la carpeta raíz junto con los archivos
de cada uno de los documentos o, mucho mejor, en una carpeta especial
dentro del sitio a la que llamaremos imágenes ( nombre de los archivos y
carpetas sin acentos ) o cualquier otro nombre que nos sugiera que, dentro
de esa carpeta, están nuestras imágenes.
Para crear una carpeta dentro de la carpeta raíz del sitio: pinchamos sobre
la carpeta raíz en el panel lateral derecho con el botón derecho del ratón y,
en el menú conextual, elegimos Nueva carpeta
Aparecerá una nueva carpeta. DW le habrá puesto como nombre untitled
Página 37
Nosotros le cambiamos el nombre:
Podemos llevar las imágenes a la carpeta por cualquiera de los

procedimientos habituales en Windows. Si por ejemplo, tal como
indicábamos al principio, la imagen no está previamente guardada en la
carpeta, Dreamweaver nos va a sugerir que lo hagamos. Supongamos que
queremos insertar una imagen que tenemos guardada en el Escritorio. La
imagen se llama enobras.gif
Pinchamos en Insertar de la barra de menús y soltamos en Imagen:
Se abre la ventana del explorador para que localizemos la imagen que

queremos insertar:
Página 38
Le damos a Aceptar. Como la imagen está fuera de la carpeta raíz del sitio,
aparece este mensaje de advertencia:
Le decimos que sí y se nos abre la carpeta raíz del sitio:
Hacemos doble clic sobre la carpeta imagenes:
Página 39
Y le damos a Guardar. La imagen se habrá colocado en el documento y en la

barra lateral derecha, en archivos, podremos ver la imagen dentro de la
carpeta imagenes
Observa la imagen colocada en el documento. Como está seleccionada, el

panel del Inspector de Propiedades estará referido a la imagen:
Una imagen puede colocarse también como fondo de una página, o de una
tabla, o de una celda. Por ejemplo, en la tabla que hemos creado en el
apartado anterior vamos a poner un fondo en la primera celda de la primera
fila (vamos a hacerlo desde este propio documento). Insertamos la tabla y
situamos el cursor en la primera celda:
Página 40
Fiesta
Noche Tiempo libre
final
Y, en el panel del Inspector de Propiedades, nos fijamos en
Una forma de hacerlo es pinchar en y, sin soltar el ratón, arrastrar hasta

pillar la imagen que queremos colocar (en este caso se llama fondo01.gif) en
el panel de archivos de la derecha:
Página 41
La imagen se habrá colocado como fondo de esa celda:
Fiesta
Noche Tiempo libre
final
A propósito de las imágenes, es muy importante que controlemos el tamaño

de las mismas para que no tarden mucho tiempo en su descarga cuando
alguien visite nuestra página.
Cuando insertamos una imagen aparece, en el panel del Inspector de
Propiedades, una información sobre el tamaño.
Otra forma de ver estos tamaños es pulsando el icono
(Ampliar/contraer) de la franja lateral derecha.
Página 42
La ventana se ampliará proporcionando información sobre los tamaños de los
archivos:
Así observamos que nuestro fondo, el fondo01.gif ocupa 3 KB que es un

tamaño adecuado. Observa, también, los dos formatos de imagen que
aparecen aquí el .gif y el .png Los dos son muy similares, se emplean para
imágnes con colores planos. El tercer formato de la web, el .jpg se emplea
para imágenes con muchos matices de color.
El formato .ico es un formato de iconos. Lo que ves allí es un favicon o una

pequeña imagen a modo de logotipo que se sitúa delante de la dirección URL
de la página y en los listados de los favoritos.
En cuanto a los gifs, decir que un uso muy extendido son los gif animados
que son imágenes con cierto movimiento que no ocupan demasiado espacio.
Por ejemplo:
La imagen ocupa 9 KB y, siempre sin hacer un uso abusivo, estos gifs

animados pueden alegrar nuestras páginas.
Página 43
(Nota: Dreamweaver hace un cálculo del tamaño por aproximación
redondeando al valor en KB más próximo por arriba -17,2 KB se convierte en
18 KB por ejemplo-. Si deseas ver el tamaño exacto lo puedes hacer desde
el explorador de Windows: te sitúas con el botón derecho del ratón encima
de la imagen y le das a Propiedades)
Este gif se ha sacado de la siguiente dirección:

http://ausmall.com.au/freegraf/freegrfa.htm
Aunque hay muchos otros sitios web que proporcionan gifs animados, y
sin animar, de forma gratuita.
11.- VÍNCULOS
Los vínculos, hipervínculos , enlaces , hiperenlaces, links (todas estas

palabras designan el mismo concepto) es uno de los elementos más
importantes del lenguaje HTML con el que se construyen las páginas web.
11.1.- VÍNCULOS A OTRO DOCUMENTO DEL MISMO SITIO
Es, quizá, el vínculo más usado. Para ello se selecciona el elemento que va a
servir para enlazar (puede ser una palabra, una frase, una imagen, un
fragmento de imagen,...). Una vez seleccionado, pinchamos en el icono de la
sección Vínculo dentro del panel del Inspector de Propiedades y elegimos el
archivo vinculado.
Por ejemplo. Vamos a hacer que la frase ir a la página anterior sea un vínculo
con la página anterior de este manual de Dreamweaver. Seleccionamos la
frase
Y vamos al Inspector de Propiedades (si no está abierto, lo abrimos

pinchando en ) y , tenemos dos opciones. Por una vez vamos a
ver dos formas diferentes de hacer las cosas.
Página 44
La primera es pinchar en el icono del apartado
y arrastrar sin soltar hasta pillar el archivo al que queremos que apunte el
vínculo.
Si la columna derecha no está visible, hazla visible antes pinchando en el
icono
La segunda es pinchar en el icono carpeta que está al lado. Se abrirá la

carpeta con nuestros archivos, seleccionamos el adecuado y aceptamos.
La palabra o frase activadora del vínculo quedará marcada de otro color

(normalmente azul y subrayada, pero esto se puede modificar como ocurre
en este documento). Para comprobar el funcionamiento, guardaremos los
Página 45
cambios, le daremos al F12 y veremos que al pinchar sobre la frase nos
vamos al otro documento.
11.2.- VÍNCULOS A DOCUMENTOS EXTERNOS
Son los vínculos que nos llevan a otros documentos que no son de nuestro
sitio. Se comienza igual: seleccionando la palabra, frase, imagen,... que será
la activadora del vínculo. En este caso vamos a partir de una imagen:
Supongamos que queremos hacer que este logo de Google nos lleve a la
página principal del famoso buscador. Seleccionamos primero la imagen: se
colocará un borde de color negro con tiradores en los laterales derecho e
inferior:
y en Vínculo del Inspector de Propiedades
Escribimos la dirección URL de destino:
En los vínculos externos es norma de estilo casi obligada que los vínculos se
carguen en ventana nueva del navegador. Esto favorece mucho la navegación.
Para hacerlo, elegimos en Destino la opción _blank
Página 46
Nuestra imagen vinculada tiene estos tres parámetros:
Un nuevo parámetro de bastante importancia es colocar un texto

alternativo para la imagen. Útil tanto en imágenes activadoras de vínculos
como en imágenes normales. Si el visitante opta por no cargarse las
imágenes (por rapidez en la carga, por ejemplo) se encontrará con un texto
alternativo.
Esto se hace en (con la imagen seleccionada, claro):
11.3.- VÍNCULOS A OTROS PUNTOS DEL MISMO DOCUMENTO
En este mismo sitio tienes abundantes ejemplos de este tipo de vínculos.
Desde un menú tipo índice, accedemos a cada uno de los apartados de ese
índice. Y todos los apartados forman parte del mismo documento.
Para hacer esto posible, primero hay que definir las anclas o puntos de
destino de los vínculos. Dreamweaver lo llama Anclaje con nombre.
Situamos el cursor en el punto en el que queramos situar el ancla y le damos
a Insertar > Anclaje con nombre
Página 47
Aparecerá este cuadro de diálogo:
Tenemos que ponerle un nombre siguiendo las mismas reglas que en los
nombres de archivos y carpetas: no acentos, no espacios, no caracteres
especiales, mejor minúsculas, mejor nombres cortos y comenzando por
letra.
En el sitio donde hemos colocado el ancla aparece este icono de color

amarillo (invisible en modo navegación):
Si pincho sobre el icono del ancla, en el Inspector de Propiedades observo

todos los parámetros del mismo:
Página 48
Una vez fijado el anclaje, para establecer el vínculo procedemos, primero,
como en los casos anteriores, seleccionando la palabra o frase que activará
el vínculo
Y, a continuación en el panel del Inspector de Propiedades escribimos el

vínculo con el carácter almohadilla delante:
Y ya estará.
11.4.- Vínculos a puntos concretos de otros documentos del mismo sitio
Los dos tipos anteriores de vínculos se pueden unir. Es decir, podemos hacer
vínculos a puntos concretos de otros documentos de nuestro sitio. Para ello,
lógicamente, tendremos que haber definido previamente el anclaje. Una vez
hecho esto, primero se define el vínculo al documento y, posteriormente, se
prolonga la dirección vinculada con la coletilla #ancla
Veamos un ejemplo: supongamos que queramos ir al apartado 08.4.2.- que

se encuentra en el documento 03.htm Primero vinculamos con el documento
Página 49
Y, después, añadimos el nombre del ancla precedido de #
Comprobar que funciona:
Ir al apartado 08.4.2.- del documento 03.htm
11.5.- VÍNCULOS DE CORREO ELECTRÓNICO
Se puede establecer también vínculos de correo electrónico a partir de una

imagen o un texto, de manera muy similar al resto de los hiperenlaces.
Primera posibilidad: La dirección de correo es visible en el documento.

Le damos a Insertar > Vínculo de correo
Y, en el siguiente cuadro de diálogo escribimos el texto y la dirección de

correo coincidentes:
Página 50
Resultado:
apuente@roble.cnice.mecd.es
Segunda posibilidad: El texto activador del vínculo es diferente.

Se comienza igual pero se escribe:
Resultado:
Escríbeme
Tercera posibilidad: A partir de una imagen.

Insertamos la imagen, la seleccionamos y, en el Inspector de Propiedades
escribimos mailto:direcciondecorreo
Resultado:
Cuarta posibilidad: Indicar la dirección sin activar el vínculo

Debido a los abusos de la recopilación de firmas por medio de robots que
recorren las páginas de internet para el envío de spams indiscriminados, es
lo que se hace últimamente, indicar la dirección de correo pero no vincularlo
y, tampoco, mostrar la arroba, pues es el criterio de actuación de los
robots. "Pillar las cadenas de texto en la que haya una arroba". Esto se
Página 51
puede hacer tanto a nivel superficial, del body mostrado en pantalla, como a
nivel de código fuente. Por eso, la ternera posibilidad, la de la imagen
vinculada, no protege contra el copiado pues, a nivel código fuente, la
dirección es perfectamente pillable.
Las soluciones posibles son, escribir @ de otra forma:
16.- MARCOS
Se denomina Marcos o Frames a una forma de organizar los diferentes

documentos de nuestro sitio web.
Una o más partes de la pantalla permanecen con contenidos fijos y otra
parte va cambiando en función de los enlaces que pulsamos en otra de las
partes de la pantalla.
Veamos un aspecto de la pantalla organizada en marcos:
Página 52
En este caso la pantalla se divide en tres partes:
 La parte superior en la que va el título del sitio.

 La parte de la izquierda que contiene los enlaces de los diferentes
documentos que forman nuestro sitio web.
 La parte más amplia donde se van a cargar los enlaces que pulsemos.
Para ver el funcionamiento de este marco pulsa aquí .
Para crear una página con marcos, debemos saber que:
 La estructura de la página es un documento independiente.

 Cada uno de los marcos es otro documento independiente.
 Cuando se carguen los diferentes documentos, el documento inicial
situado en el espacio principal (main frame), será sustituido por el
enlace que haya sido pulsado.
Empezamos:
Voy a crear una estructura de marcos dentro de este sitio y en una carpeta
a la que llamo marcos... podría hacerlo como un sitio absolutamente
independiente. En ese caso la carpeta marcos sería la carpeta raíz. Creamos
la carpeta pinchando con el botón derecho del ratón sobre la carpeta raíz:
Y le ponemos como nombre marcos
Página 53
Le damos a Archivo > Nuevo...
Y elegimos Conjunto de marcos y el último modelo que es el que vamos a

hacer:
Aparecerá creado en el espacio principal de la interfaz. Observa el nombre

que le ha puesto DW UntitledFrameset (conjunto de marcos sin título)
Página 54
Podría ser conveniente escribir algo en cada uno de los documentos que
forman el conjunto de marcos.
No olvides que estamos hablando de cuatro documentos, cuatro archivos, en

tres espacios:
 La estructura de marcos o el conjunto que es un documento especial

que distribuye los espacios. El frameset o el conjunto de marcos.
 El documento titulo que es la banda horizontal superior.
 El indice que es la banda vertical izquierda.
 El espacio principal que es el destinado a alojar el contenido de cada
documento cargado.
Página 55
Ahora le damos a Archivo > Guardar todo
Y empezaremos a guardar cada uno de esos documentos. Empezamos:
Página 56
Observa que el cordón está recorriendo todo el espacio y que DW le ha

puesto como nombre provisional UntitledFrameset. Eso quiere decir que
estamos guardando la estructura, el conjunto de todos los marcos. Pero
antes, hacemos doble clic en la carpeta marcos que es donde quiero guardar
todos los archivos de los marcos:
Le podemos poner como nombre conjunto.htm (si fuese lo primero que

tuviese que abrirse en un sitio web, le llamaríamos index.htm)
Página 57
Le damos a Guardar. DW seguirá el proceso de guardado:
Ahora el cordón abraza el espacio principal. Lo podemos guardar con el

nombre principal.htm
Página 58
Sigue el proceso:
Ahora estamos guardando el espacio índice. Lo podemos guardar como

indice.htm Sigue el proceso: Guardamos la parte superior como titulo.htm
Página 59
Una vez guardados nuestros cuatro documentos, comprobamos que en la

columna derecha están los cuatro archivos dentro de la carpeta marcos:
Podemos dar formato a cada documento, bien por separado, bien dentro de
la estructura del conjunto de marcos:
Página 60
Ahora sólo nos resta crear los tres nuevos documentos que se cargarán en
el espacio principal al pinchar en los enlaces del menú de la izquierda. A los
documentos, los podemos llamar pagina1.htm pagina2.htm y pagina3.htm
Establecemos los vínculos (con el conjunto de marcos abierto).

Seleccionamos página 1 y vinculamos con pagina1.htm
Aceptamos y lo importante es elegir el destino correctamente:
mainFrame es el espacio principal, leftFrame el izquierdo, topFrame el

superior. Los destinos que quedan ya no son propios de nuestros marcos
concretos: _blank es cargar en ventana nueva, _parent es en el caso de
marcos anidados, _self es el que está siempre por defecto, en el propio sitio
y _top ocupando toda la pantalla.
Página 61
Podemos estirar o encoger el ancho de cada uno de los marcos, simplemente
colocando el cursor sobre uno de los bordes. La flechita blanca se
convertirá en doble flecha negra y arrastrando, podremos modificar la
anchura establecida originalmente. Si los bordes entre marcos se ocultan,
esto no lo podremos hacer. Bastará para ponerlos de manifiesto el darle a
Ver > Ayudas visuales > Bordes de marco
Observa los bordes activados:
Página 62
Nos queda poner un título al conjunto de todos los marcos (y, si quieres, a
cada marco). Para hacerlo al conjunto, pincha primero en cualquiera de los
bordes de los marcos para que aparezca la etiqueta <frameset> por encima
del panel de propiedades
En ese momento, ya podemos colocar el título:
16.1.- ENTENDER LOS MARCOS
Abrimos nuestro conjunto de marcos haciendo doble clic sobre el nombre

del archivo y pinchamos en cualquiera de los bordes para que aparezca una o
dos veces la etiqueta frameset encima del Inspector de Propiedades. Si
pinchamos en el borde horizontal aparecerá un frameset.
Página 63
Si lo hacemos en el borde vertical, aparecerán las dos etiquetas de los

frameset.
Esto tiene que ver con que el primer frameset ha consistido en la división
del esapcio en dos filas (la estrecha del título y la otra). El segundo
frameset ha consistido en la división de esa segunda fila en dos columnas.
Son dos framesets, por tanto, anidados.
Ahora pinchamos en para acceder al código. Veremos algo así:
Página 64
Lo primero que tenemos que observar es que es una página un tanto especial.
Es un documento web que no tiene body. La etiqueta de body ha sido
sustituida por la etiqueta frameset. El resto de código es bastante similar.
Vamos a intentar entenderlo, al menos en parte.
Empezamos en Quiere decir que la primera división del

espacio ha consistido en dos rows filas, la primera de 101 píxeles y la
segunda "de lo que quede" eso quiere decir el asterisco. Dejamos el resto de
los atributos de esa fila.
Ahora, las dos filas creadas, han dado origen a
1. Un frame en el que se ha cargado src

de source fuente el documento titulo.htm y al que DW le ha llamado
topFrame (frame de arriba).
2. En la segunda fila, en vez de un frame, hemos creado otro
que ha dividido el espacio en dos columnas, la
primera de 81 píxeles y la segunda "de lo que quede"
Falta por decir qué se carga en cada uno de los espacios, columnas, de este
segundo frameset:
1. En el primero un en el que se carga el

documento indice.htm y que DW lo llama leftFrame o frame de la
izquierda.
2. En el segundo, se carga el
documento principal y DW lo llama mainFrame o marco principal.
Estos nombres, topFrame, leftFrame, mainFrame son los que aparecen en el

Destino de los vínculos:
Página 65
Lógicamente yo puedo cambiarlos en este código fuente y, entonces,

aparecerán con los nombres cambiados en el menú de destino de los vínculos.
El resto de código:
 frameborder="NO" es el borde del marco. En este caso se define que

no haya pero se puede modificar en el Inspector de Propiedades
 framespacing="0" es el espacio entre los frames. En este caso,

definido a cero.
 scrolling="NO" quiere decir que no va a aparecer la barra de
desplazamiento, el scrolling.
 noresize quiere decir que no vamos a dejar que el visitante pueda
modificar la anchura de los marcos.
 La etiqueta <noframes> y lo que viene después, está preparado para
poner un contenido para los navegadores que no soporten marcos.
Ahora eso ya casi inexistente.
Página 66

Capacitacion 6 (Dreamweaver)

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Capacitacion 6 (Dreamweaver)

Hochgeladen von

Copyright:

Verfügbare Formate

ESCUELA PREPARATORIA

“LIC. SALOMÓN GONZÁLEZ BLANCO”

El primer paso es conseguir el programa Dreamweaver en su versión MX

Al instalar el programa es aconsejable aceptar todo lo que la instalación

02.- ABRIR EL PROGRAMA.

Antes de continuar, es importante que te familiarices con las columnas y

icono . Para recuperar su vista se le da a

Tanto en la columna derecha, más estrecha, como en la izquierda, más

03.- CREAR EL SITIO.

Aparecerá el siguiente cuadro de diálogo:

Le damos a Nuevo... > Sitio

Aparecerá momentáneamente este cuadro de diálogo:

Para, automáticamente, saltar a éste otro: (en el caso de que no salte

Pinchamos en la pestaña Avanzadas: Ver nota 1

Lo primero que hacemos es poner un nombre al sitio. Por ejemplo, Mi primer

Pinchamos en para crear una nueva carpeta y le ponemos como nombre

Hacemos doble clic en Abrir:

Observa que ya tenemos definido el sitio con un nombre Mi primer sitio y

Observa el lateral derecho de la interfaz:

Aparece abierto el sitio Mi primer sitio que está alojado en

Para crear la primera página (el primer documento) podemos, simplemente,

Aparecerá nuestro primer documento que, a falta de guardarlo con un

Pero este tablón de mandos no siempre va a estar visible. El mejor método

Aparecerá este nuevo cuadro de diálogo. Elegimos Página básica y HTML y

Y llegaremos al mismo sitio ya explicado, un Untitled-1 listo para

Procedemos, a continuación, a su guardado. Le damos a Archivo > Guardar

Dreamweaver procederá a guardar el documento en la carpeta raíz del sitio

Como va a ser el primer documento del sitio, podemos llamarlo index.htm

Pulsamos el botón Guardar. Observa cómo se ha incorporado el nombre del

Y observa también cómo se ha colocado el archivo en la barra lateral

A continuación, procedemos a poner un título al documento:

Los títulos de los documentos se pueden (y se deben) escribir con la normas

Pulsamos la tecla F12 para hacer saltar al navegador. Si no hemos guardado

Le decimos que Sí y vemos nuestra página:

Se ha cargado en el FireFox de Mozilla (se cargara en el que tengas como

05.- A PONER ALGO EN EL DOCUMENTO

Simplemente empezamos a escribir en el espacio vacío.

Para dar formato al texto, disponemos de las herramientas que aparecen en

Si este panel está oculto es porque está en esta posición:

Para efectuar los cambios que necesitemos, tendremos que seleccionar

He seleccionado la primera palabra. Le he aplicado un Encabezado 1, lo he

Modifico ahora la segunda frase:

Observa que, mientras hacemos algún cambio y no guardamos, aparece un

Lo guardamos con Archivo > Guardar

Conviene guardar cada cierto tiempo por lo que pueda pasar...

Pinchamos en Color de fondo y elegimos uno:

Se habrá colocado en su sitio:

Lo cargo en otro navegador. Esta vez el Mozilla:

06.- COMPROBAR SIN F12

Lo he dado por supuesto en los párrafos anteriores al decir "cargar la

Hacemos doble clic en la carpeta para abrirla:

El icono que acompaña al archivo es el del FireFox (mi navegador

O bien, abrir el navegador y buscar el archivo. Por ejemplo, abro el Mozilla y

Haciendo doble clic en el icono se abrirá el documento para poder

En la imagen vemos nuestro sitio Mi primer sitio en medio de otros ocho

08.- PUBLICAR EL SITIO

Puede parecer un poco prematuro empezar ya a pensar en publicar nuestra

08.1.- CONSEGUIR UN SERVIDOR QUE NOS LO ALOJE

Es la primera condición: conseguir un Servidor o Host que nos proporcione

08.2.- ¿CUAL ES LA DIRECCIÓN URL?

Cuando se mande al servidor el index.htm del propietario, esta primera

08.3.- TRANSFERENCIA DE FICHEROS

Podemos emplear un programa específico de transferencia de ficheros por