Tutorial Dreamweaver

1

TUTORIAL DE MACROMEDIA DREAMWEAVER

Crear el sitio.

Lo primero que tenemos que hacer es crear una carpeta que será el sitio donde residan nuestras páginas y todos los archivos que vayamos añadiendo. Es recomendable que esta carpeta "cuelgue" directamente del disco duro C. Así que pinchamos en Sitio, en la Barra de Menús de arriba, y se desplegará el siguiente menú:

Elegimos Nuevo sitio... y se abre esta otra ventana:

2

Hacemos doble clic en el icono de la Carpeta raíz local. Se desplegará la ventana de

búsqueda de directorios. Elegimos C y le damos al icono para crear una nueva carpeta.

Aparecerá la siguiente ventana:

Cambiamos el nombre de la Nueva carpeta y le ponemos, por ejemplo, mi_sitio_web y le damos a .

Casi con toda seguridad tengas que volver a repetir el proceso anterior pues habrás vuelto a la ventana de Definición del sitio:

3

Le das al icono y, ahora sí, seleccionas la carpeta que acabas de crear, le das a , aparecerá esta ventana:

Le das a y volverás a la ventana de Definición del Sitio pero ahora ya con la carpeta creada y seleccionada como Carpeta raíz local:

Ponemos el nombre al sitio. Por ejemplo Mi primer sitio. Lo demás lo dejamos como está y le damos a Aceptar.

4

Volveremos a la ventana múltiple del Sitio:

5

Observa el lateral inferior derecho:

Aparece abierto el sitio que acabamos de crear: que está alojado en una carpeta denominada mi_primer_sitio que está en el disco duro C:

6

Crear el primer documento.

En la ventana múltiple ya se ha creado un primer archivo al que Dreamweaver llama

Untitled-1: Observa la pestaña inferior izquierda del espacio mayor vacío: Por otro lado, el documento (no el archivo) lo que será la página, tampoco tiene

título: . Antes de hacer nada con él, podemos proceder a guardarlo. Como va a ser nuestro primer documento, vamos a guardarlo con el nombre especial de index. DreamWeaver le añadirá la extensión .htm de página web.

Le damos a Archivo > Guardar

Aparecerá la ventana Guardar como:

Le ponemos el nombre index:

7

Y le damos a Guardar.

Observa como en el lateral inferior derecho aparece el archivo dentro de la carpeta del sitio:

8

Y, en la pestaña inferior del documento ya aparece el nuevo nombre (index)que le

hemos dado al archivo: .

Falta poner el título al documento. Lo vamos a hacer en el próximo apartado.

9

La primera página

Simplemente empezamos a escribir en el espacio vacío.

Podemos empezar dando la bienvenida a nuestros visitantes. Escribimos pulsando Enter para saltar a la siguiente línea:

Para dar formato al texto, disponemos de las herramientas que se desplegan en el denominado Inspector de Propiedades:

Si no ves este panel es porque está oculto: . Observa que el triángulo en flecha está señalando hacia la derecha. Simplemente haciendo clic en él, pasa a la posición anterior.

Para efectuar los cambios que deseemos, previamente seleccionaremos el texto al que queramos hacer referencia:

10

Por ejemplo a la primera línea le hemos aplicado un tamaño de Encabezado 1. No hemos modificado el tipo de fuente, ni el tamaño (de forma explícita). Le hemos puesto de color rojo y lo hemos centrado en la línea.

Ahora hacemos cambios en la segunda línea:

Ahora hemos cambiado el tipo de fuente, el tamaño, el color. Lo hemos puesto en negrita y centrado.

Para finalizar, vamos a poner un título al documento, por ejemplo, Página de saludo. Lo

escribimos directamente en la ventana Título: .Observa cómo ha cambiado la barra de título:

En primer lugar aparece el nombre del documento: Página de saludo. En segundo lugar la carpeta raíz: mi_sitio_web y finalmente, el nombre del archivo: index. El asterisco que viene a continuación nos recuerda que el documento no ha sido guardado después de los cambios efectuados. Así que es lo que podemos hacer ahora: Archivo > Guardar:

11

El asterisco habrá desaparecido:

Ahora vamos a poner un color de fondo a la página. Para ello pinchamos en cualquier punto vacío de la página con el botón derecho del ratón y elegimos Propiedades de la página... del menú contextual:


12

De todo lo que se puede hacer aquí, de momento nos quedamos con poner un color de fondo. Pincha en el cuadrito de Fondo y aparecerá la paleta de colores:

Elegimos el que nos parezca y vemos su efecto en Aplicar. Cuando estemos convencidos, le damos a Aceptar.

Nuestra página tiene, ahora este aspecto:

13

Le damos a Archivo > Guardar (No olvides hacerlo de vez en cuando, por lo que pueda pasar...)

Comprobar el documento con los navegadores.

Va siendo hora de que comprobemos nuestra página con el navegador (con los navegadores).

Una primera forma de hacerlo consiste en darle a la tecla de funciones de nuestro teclado: F12. Se abrirá el navegador que tengamos configurado como predeterminado y veremos el aspecto de la página.

Otra forma conveniente es ver nuestra página desde fuera de Dreamweaver. Para ello vamos al Explorador de Windows o al disco duro C y buscamos la carpeta mi_sitio_web y el archivo que contiene la primera página: index.htm

Hacemos doble clic sobre el archivo y visualizaremos nuestra página con el navegador que tengamos predeterminado. En este caso, como vemos por el icono, es el Explorer.

Conviene comprobar la página, también, con algún otro navegador, para asegurarnos de que no hay problemas de visualización: A veces hemos cometido un fallo que un navegador detecta y otro no...Algunas de las funciones un poco más sofisticadas, no son igualmente soportadas por todos los navegadores (hojas de estilo, comportamientos,...). Si el otro navegador es el Netscape (el segundo más conocido), lo

14

buscamos y abrimos.Probablemente nos pedirá que iniciemos la conexión telefónica. Le decimos que no y, cuando esté ya la primera página del navegador abierta sin mensajes, le damos a Archivo > Abrir página...:

Nos aparecerá la ventana Abrir página. Le damos a Elegir archivo...

Y buscamos en el disco duro la carpeta mi_sitio_web

15

Le damos a Abrir

Haciendo doble clic sobre el icono para abrirla:

Aparecerá esta ventana.Le damos a Abrir estando seleccionado Navigator.

La página se ve así con el Netscape:

16

A partir de este momento conviene minimizar (no cerrar) el Netscape, para tener a mano la comprobación de los cambios que vayamos realizando también con este navegador. La Barra de Tareas debería tener un aspecto similar a éste:

El botón de Dreamweaver ,el botón del Explorer y el del Netscape.

17

Insertar una tabla.

Desde Insertar de la barra de Menús, elegimos Tabla.

Aparecerá una ventana similar a ésta:

Podemos determinar el número de Filas, el número de Columnas, el Ancho de la tabla en píxeles o porcentaje, especificar si queremos que la tabla tenga Borde e indicarle el grosor del borde en su caso.El Relleno de celda hace referencia al espacio que queremos que exista entre el texto, o lo que coloquemos en cada una de las celdas, y su borde. El Espacio celda es el espacio que queremos que haya entre una celda y otra. Ambos se indican en píxeles y se pueden quedar vacíos en el caso de que queramos que tanto el relleno de celda como el espacio de celda sea el mínimo posible.

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:

Lunes Martes Miércoles Jueves Viernes

Mañana

Tarde

18

Modificar la tabla.

Si ponemos el cursor en cualquier punto de la tabla, en la barra de estado, encontraremos una información similar a ésta:

Son las etiquetas del lenguaje HTML que veremos más adelante. De momento, indicar que la etiqueta <body> hace referencia a todo el documento que se visualiza con el navegador. La etiqueta <table> hace referencia a la tabla entera, la etiqueta <tr> a la fila en la que está el cursor y la etiqueta <td> a la celda. Observa que la última etiqueta está en negrita. Eso quiere decir que es la celda la que está seleccionada.

Por debajo de esta barra de estado nos encontramos con el panel del Inspector de Propiedades que harán referencia a la celda en la que, en ese momento, esté el cursor:

Desde ese panel podríamos cambiar las propiedades de la celda en cuestión.

Si, desde la Barra de Estado pulsamos la etiqueta <table>, se seleccionará toda la tabla.

Si ahora vemos las propiedades, éstas serán las propiedades de la tabla y, desde allí, podremos cambiar las propiedades de la tabla y su configuración.

Podemos modificar el número de Filas en Filas, el número de columnas en Cols, la anchura en An, la altura en Al, el espacio entre los bordes y el contenido en Rell.celda, el espacio entre las celdas en Esp.celda, la alineación en Alinear, el grosor del borde en

19

Borde. De momento, ignoraremos los seis iconos siguientes: . Podemos establecer un color de fondo en Col.Fondo, un color de borde en Col.borde o una imagen en Im.

Vamos a realizar algún cambio en la tabla:

Hemos añadido una fila, alineado al centro, 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

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:

Hemos seleccionado la primera fila. Ahora el panel Propiedades afectará a la fila seleccionada:

20

Si pulsamos, por ejemplo, el botón el texto que esté escrito en las celdas de esa fila se colocará centrado en cada una de las celdas. Pulsando, por ejemplo, el botón el texto escrito pasará a estar en negrita. El resultado será:

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 sóla:

Podemos añadir texto o variar las propiedades de las celdas por los procedimientos descritos:

21

Hemos seleccionado por el método de arrastrar el cursor las celdas anteriores para cambiar el color de fondo:

El resultado es:

22

Imágenes

Para insertar una imagen es conveniente tenerla previamente guardada en la carpeta del sitio. De lo contrario Dreamweaver nos advertirá para que guardemos una copia en la carpeta correspondiente.

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 imagenes (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, pulsamos la pestaña Archivo de la franja lateral derecha y elegimos Nueva carpeta

Por cierto, para hacer visible o invisible la franja lateral derecha le damos al icono

Se creará una carpeta con el nombre untitled que habrá que cambiar por el que deseemos tenga nuestra carpeta de imágenes:

Por ejemplo, podemos llamarla imag:

23

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

Pinchamos en Insertar de la barra de menús y soltamos en Imagen:

Aparecerá la ventana Seleccionar origen de imagen:

Pinchamos en Escritorio y seleccionamos la imagen: obras

24

Aparecerá el mensaje de advertencia diciéndonos que la imagen no está en la carpeta raíz del sitio:

Le decimos que Sí y se abrirá la ventana Copiar archivo como

25

Hacemos doble clic sobre la carpeta imag para abrirla

Le damos a Guardar. La imagen se guardará en la carpeta imag y se colocará en el documento:

26

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


Mañana Aula 1 Aula 2 Aula 1 Aula 2 Aula 1

Tarde Aula 1 Aula 3 Aula 1 Aula 3 Aula 1

Noche Tiempo libre Fiesta final

Podemos poner una imagen de fondo en alguna o algunas de las celdas. Por ejemplo, seleccionamos la primera celda (colocamos el cursor en ella y pulsamos <td> en la barra de estado). En el panel de Propiedades pinchamos en de

27

Aparecerá la ventana de Seleccionar origen de imagen. La buscamos y. una vez seleccionada,

le damos a Aceptar y la imagen se colocará como fondo de la celda seleccionada:

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 cuadro de diálogo, una información sobre el tamaño y el tiempo de descarga aproximado. Otra forma de ver estos tamaños es pulsando el icono (Ampliar/contraer)de la franja lateral derecha. La ventana se ampliará proporcionando información sobre los tamaños de los archivos:

28

Así vemos que la imagen obras ocupa 3 KB lo cual es un tamaño aceptable. En cambio el fondo1 ocupa mucho espacio: 24 KB. Esta imagen sería adecuado sustituirla por otra que fuese bastante más ligera.

Observa que los dos formatos de imagen que más abundan (precisamente porque no ocupan demasiado) en Internet, son los formatos gif y los jpg. Los gif se emplean para imágenes con pocos colores y los jpg para imágenes, como fotografías, que requieren más colores. Ahora empieza a extenderse otro formato: el png.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 nuestra páginas.

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

29

Vínculos

Los vínculos, hipervínculos, enlaces, hiperenlaces (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.

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

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 curso de Dreamweaver. Seleccionamos la frase

abrimos el panel Propiedades, si no está abierto, pinchamos en :

Pinchamos en el icono de y se abrirá:

30

Seleccionamos el archivo correspondiente, en este caso es seis y le damos a Aceptar.

El enlace habrá quedado marcado de otro color y subrayado aunque esto se puede modificar:

Cuando probemos con el navegador comprobaremos que al pinchar en la frase nos vamos al documento anterior: Imágenes. El documento se abrirá en su comienzo.

Vínculos a documentos externos

Es cuando el vínculo nos lleva a una página de internet ajena a nuestro sitio. Hay que hacer lo mismo: Seleccionar el elemento que va a ser el activador del vínculo y, ahora, escribir en la caja de texto la dirección completa del sitio.

Supongamos que queremos hacer que esta imagen

sea un vínculo a la página del CNICE. Pues bien, la seleccionamos y escribimos la URL de la página http://www.cnice.mecd.es en la caja de texto:

31

Como en el caso anterior, comprobaremos que funciona dándole a la tecla F12 y comprobando con el navegador

Vínculos a otras partes del mismo documento

Es cuando queremos que al pinchar en el activador se nos coloque al principio de la página, al final, al comienzo de un apartado determinado, ... siempre dentro del mismo documento.

Para ello primeramente hay que hacer marcas en los puntos a los cuales queremos que vaya el vínculo.

Por ejemplo: Vamos a hacer vínculos a cada una de las partes de este documento: Al comienzo (apartado 12) y a los apartados 12.1 , 12.2. 12.3 y 12.4. Para ello nos colocamos con el cursor en el punto en cual queremos establecer un denominado punto de fijación con nombre.

Lo hacemos con el comienzo: Situamos el cursor delante del título del documento (delante de Vínculos) y pinchamos en la barra de menús Insertar > Punto de fijación con nombre

Aparecerá un cuadro de diálogo para que introduzcamos el nombre que le queremos dar:

32

Ponemos 1 y le damos a Aceptar:

Aparecerá este icono justo en el sitio donde habíamos colocado el cursor y que es el punto al cual se irá cuando activemos el enlace. Este icono no se visulizará cuando veamos la página con el navegador.

Hacemos los mismo con los apartados siguientes: Les damos el nombre 2 , 3 , 4 y 5. Ahora establezcamos los enlaces:

Ir al comienzo (1)

Ir a vínculos con otros documentos del mismo sitio (2)

Ir a vínculos externos (3)

Ir a vínculos con otras partes del mismo documento (4)

Ir a vínculos a puntos concretos de otros documentos del sitio (5)

Seleccionamos las frases y en la caja de texto del vínculo escribimos #1 , #2 , ... según vaya correspondiendo

33

Vínculos a puntos concretos de otros documentos del mismo sitio

Los dos tipos de vínculos anteriores se pueden combinar, de tal manera que podamos ir a partes concretas de otros documentos. En este caso, una vez definido el punto de fijación con nombre en el documento correspondiente, se establece el enlace escribiendo el nombre de la página con su extensión .htm seguido de almohadilla y el nombre del punto de fijación.

Ir a Declaración de Intenciones

Ir a Instalar el Programa

Ir a Abrir el Programa

Ir a Crear el Sitio

Ir a Crear el primer documento

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.

Veamos un ejemplo. Vamos a vincular un nombre (o una expresión o frase cualquiera) con su dirección de correo electrónico. Una forma de hacerlo es:

Colocar el cursor en el punto en el que queramos que esté el enlace y darle a Insertar > Vínculo de correo electrónico:

Aparecerá el cuadro de diálogo en el que pondremos el texto que queramos que sirva como enlace y la dirección de correo electrónico:

34

Éste es el resultado:

Escríbeme

Cuando un visitante de nuestra página pinche sobre este vínculo se abrirá su programa de correo y podrá enviar un mensaje a la persona a cuya dirección hemos vinculado el enlace.

13.- Una vista al código fuente

Podemos aprovechar este tema para echar un vistazo al código que Dreamweaver va generando automáticamente.

Si no tienes mucha idea de a qué nos estamos refiriendo pincha aquí: código html. Si ya sabes, aunque sólo sea un poco, de lenguaje html, continúa leyendo.

Vamos a ver cómo ha quedado el código para ese enlace de correo electrónico: Selecciono la palabra Escríbeme y, una vez seleccionada, pincho en el botón de la barra de herramientas: . Veremos el código fuente de nuestra página. Entre el resto del código aparecerá:

Vemos la palabra seleccionada Escríbeme (el acento se escribe con los caracteres especiales í) rodeada de dos etiquetas. La primera de enlace al correo que comienza <a href= con el mailto dentro de las comillas y la segunda etiqueta de cierre del enlace </a>.

Para volver a la vista normal pincho en

Pues bien, si yo quiero emplear una imagen como enlace del correo, puedo hacerlo

desde el código. Primero coloco la imagen: . La selecciono y me voy a ver el código fuente pinchando en . Veré lo siguiente:

Que me está diciendo que la imagen (img) se encuentra (src source en inglés) en la carpeta ima , se llama correo_sonrisa y tiene formato gif. Después viene su medida en píxeles en anchura y altura.

35

Pues bien, puedo colocar las etiquetas de enlace de correo anteriores: <a href="mailto:[email protected]"> delante y </a> detrás:

Dándole a Archivo > Guardar cuando hayas acabado y volviendo a la vista normal

(Vista diseño) pinchando en

De esta manera he conseguido que la imagen anterior se convierta en un enlace al correo electrónico. Comprueba que funciona dándole a la tecla f12.

(Nota: Al ir escribiendo directamente el código, Dreamweaver MX nos va ayudando a partir de las primeras letras que vayamos introduciendo, proporcionándonos los posibles fragmentos de código que pudiéramos ir necesitando. Simplemente haciendo doble clic sobre el correcto, éste se incorpora al código)

Salto de línea.

Probablemente a estas alturas del curso ya te habrás encontrado con la necesidad de separar dos líneas de texto por algo menos del espacio que se origina al pulsar el intro del teclado.

Ello se consigue con Insertar > Caracteres especiales > Salto de línea

Vamos a observar el código que se genera cuando pulsamos el intro (lo pulso):

Observa que ha colocado el párrafo anterior entre la etiqueta <p> con los atributos de estilo "texto"(esto lo veremos más adelante) y alineación izquierda y la etiqueta de cierre (no imprescindible) </p>

Vamos ahora a insertar un salto de línea. (Lo inserto) Observamos el código que se ha escrito:

36

En el momento que hemos insertado el salto de línea se ha escrito la etiqueta <br> del inglés break, romper.

Este salto de línea es una utilidad que, siendo muy usada, parece que está un poco escondida en este editor.

37

Listas de cosas.

Cuando queremos realizar una enumeración de objetos, lo hacemos pulsando la tecla del panel de propiedades (una vez que nos hemos situado en el primer objeto de la lista):

Estas son mis aficiones:

• El cine • La lectura • Los paseos por el campo

Para acabar la enumeración, vuelvo a pulsar el mismo botón:

Veamos el código que se ha generado:

Se introduce la lista con la etiqueta <ul> unordered list y después cada uno de los objetos de la lista con las etiquetas <li> list item de apertura y su correspondiente de cierre.

Si, en cambio, queremos que nuestra lista sea numerada, pulsamos el botón :

Estas son mis aficiones por orden de preferencia:

1. El deporte de aventura. 2. La música rock 3. Salir de juerga con mis amigos

Veamos el código que se ha generado:

La etiqueta <ol> de ordered list. Las otras etiquetas son las mismas <li> list item que en el caso de las listas no ordenadas.

38

Sangrar el texto.

Si deseo que una determinada línea comience algo más allá del margen, no lo conseguiré dándole al espaciador. Tendré que pulsar la tecla que permitirá que el texto se sitúe sangrado desde el margen izquierdo. Puedo pulsarlo varias veces. Hacemos una prueba pulsándolo cuatro veces:

He pulsado 4 veces este botón . Y pulso intro:

Ahora el margen se guarda. Pulso intro:

Para volver al margen inicial pulsaré la tecla Pulso intro

Pulso 4 veces la tecla . Esta línea ha vuelto al margen inicial.

Veamos el código generado:

Cada vez que pulso el botón se ha generado la etiqueta <blockquote> que quedaba sin cerrar. El botón se encargaba de ir cerrando cada una de las etiquetas anteriormente abiertas.

Otra forma de hacer esto de manera más manual (y más precisa o exacta) es introduciendo desde el código un carácter especial de avance de un espacio. Es el carácter no break space. Podemos poner tantos como haga falta para conseguir nuestros objetivos:

aaaa aaaa aaaa aaaa aaaa aaaa aaaa

39

aaaa aaaa

Este es el código que, esta vez, hemos escrito directamente:

No olvidarse de guardar los cambios dando a Archivo > Guardar )

40

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:

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 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 un sitio nuevo al que voy a llamar Ejemplo de marcos dentro de la carpeta raíz marcos que creo en el disco duro C.

41

Empiezo creando un nuevo archivo: Archivo > Nuevo archivo

Aparecerá el nuevo archivo al que Dreamweaver llamará untitled.htm

Hago doble clic sobre él para abrirlo:

42

Pulsamos para que se despliegue:

Pinchamos en la pestaña para que aparezcan los patrones de marcos:

Colocando el cursor sobre cada uno de los iconos nos muestra los diferentes conjuntos de marcos que podemos insertar.

Una vez decidido qué conjunto de marcos vamos a utilizar (en nuestro caso: ) hacemos un clic sobre el icono y el conjunto de marcos dividirá nuestra página. Si no estamos de acuerdo con la anchura de los marcos podemos modificarlo simplemente situándonos con el cursor en el borde y arrastrando.

43

En este momento, Dreamweaver ya ha creado 4 diferentes documentos: El primero que es el que contiene la estructura de los tres marcos (frameset) y uno por cada marco (el superior, el izquierdo y el principal) los frames. Podemos, ahora, escribir algo en cada una de las tres partes para identificarlas posteriormente: Por ejemplo:

• Escribimos: Frame del título. • Frame del índice. • Frame principal.

Algo así:

44

Procedemos a Guardar: Archivo > Guardar todo:

Este proceso es muy importante y te sugiero que lo hagas tal como se indica:

Aparecerá esta ventana:

45

Observa que a la carpeta raíz del sitio la hemos llamado marcos, luego vamos a guardar en esta carpeta los frames creados. Puede ocurrir que Dreamweaver intente guardarlo en otro sitio, en ese caso tienes que buscar la carpeta marcos dentro del disco duro C. Observa, también, que aparece, aparte de la carpeta _notes, un documento denominado untitled (más adelante sabremos qué documento es éste).

Lo primero que se va a guardar es el conjunto de marcos o frameset. Dreamweaver le ha puesto un nombre: UntitledFrameset-7. Nosotros le podemos llamar conjunto o bien index porque es la página que se va a abrir al principio con todos los marcos cargados. Observa el cordón que recorre todo el espacio, eso nos indica que es el conjunto de marcos lo que estamos guardando.

46

Una vez cambiado el nombre y guardado, aparecerá la siguiente ventana:

Observa que ahora el cordón está rodeando el frame de la izquierda, el frame de los enlaces. Además, el nombre que le está poniendo Dreamweaver ya no es Frameset sino Frame: UntitledFrame-6 Le ponemos el nombre que nos parezca, por ejemplo, indice.

Le damos a Guardar y aparecerá la última ventana:

47

Ahora el cordón está rodeando al marco superior. De nuevo observamos el nombre de Dreamweaver: UntitledFrame... Estamos guardando el marco del título. Podemos llamarlo titulo.

Le damos a Guardar y ya no aparecen más ventanas. Nos falta, sin embargo, un frame por guardar el frame principal: Éste es el documento que Dreamweaver ha guardado con el nombre untitled que veíamos en la carpeta marcos.

Veamos los archivos que tenemos:

48

Observamos que aparecen los cuatro documentos:

• index.htm con la estructura de todos los marcos. • indice.htm el marco izquierdo. • titulo.htm el marco superior. • untitled.htm que es el marco principal.

Podemos cambiar el nombre a este último marco y le llamamos principal.htm desde este mismo lugar. Botón derecho del ratón: Renombrar

Al haberle cambiado el nombre, aparecerá la siguiente ventana de actualización de los vínculos:

Le damos a Actualizar. Nuestro proceso habrá finalizado. Lo único que nos queda es modificar el texto de cada uno de los marcos con los contenidos reales que queramos colocar.

Comprobamos, finalmente, que los tres marcos y el conjunto de marcos están dentro de la carpeta del sitio:

49

Vamos a intentar entender un poco la estructura de este complejo sistema.

Abrimos nuestro index.htm haciendo doble clic sobre él.

Observa las etiquetas que aparecen: : Nos indican que el frame principal (observa que está subrayado el contorno y la etiqueta en negrita) está dentro de un frameset que es la banda horizontal entera (con el frame del índice) y que este frameset está dentro de otro que divide al espacio en dos bandas.

Si al menos un no aparece al abrir el index pincha con el ratón en cualquiera de los bordes internos de separación entre marcos (a veces cuesta un poco, parece que el borde inferior es el que antes responde). Cuando ya tengas al menos un frameset pincha en para ver el código fuente generado:

50

Nos fijamos en la etiqueta <frameset rows"80,*" . Esto nos está diciendo que la primera estructura de marcos es una división del espacio en una fila de 80 píxeles y "lo que quede" (eso indica el asterisco). El resto de esa línea lo dejamos de momento.

La siguiente línea <frame name="topFrame" indica que la primera fila es el marco topFrame y que en ese marco se va a cargar el documento titulo.htm: src="titulo.htm">

Si sólo hubiese esa división en dos filas, ahora vendría la etiqueta de esa segunda fila, pero como la segunda fila se ha dividido en dos columnas, eso es otro frameset, que es la etiqueta que viene en la tercera línea:

<franeset cols="80,*: Dos columnas, la primera de 80 píxeles y la segunda de "lo que quede" (lo indica el *).

Ahora viene los nombres y lo que se carga en cada una de esas dos columnas: En la primera cuyo nombre es leftFrame <frame name="leftFrame" se carga el indice.htm src="indice.htm">

En la segunda columna cuyo nombre es mainFrame <frame name="mainFrame" se carga el documento principal.htm src="principal.htm>

Los dos frameset tienen border=0, eso significa que el borde entre ellos no se va a visualizar con una línea cuando se visite el sitio. Esto se puede modificar con el panel de propiedades del conjunto de marcos:

51

Cargar otros documentos en el marco principal

Cada uno de los tres documentos que forman nuestro espacio se pueden modificar desde el conjunto de marcos, o bien, abriendo cada uno de ellos de manera independiente.

El documento que va a tener los enlaces se recomienda que sea modificado dentro de la estructura de marcos para poder elegir el destino de los enlaces. Así colocamos el texto, los fondos, que nos parezca y, cuando vayamos a hacer los enlaces:

52

Seleccionamos el 1 y pinchamos en la carpeta del panel de propiedades:

53

Nos aparecerá la ventana de selección de archivos.

54

Elegimos uno (que tenemos que tener preparado de antemano, lógicamente) y le damos a Aceptar.

A continuación tenemos que elegir el marco de destino en Dest:

55

Elegimos mainFrame

Hacemos lo mismo para el enlace del 2: Lo seleccionamos le damos a la carpeta del vínculo. Elegimos el archivo dos y en Dest seleccionamos el mainFrame.

Lo mismo para el tercer enlace.

Y guardamos: Archivo > Guardar todo

Le damos a F12 para comprobar con el navegador que las cosas funcionan:

56

Formularios

Vamos con una de las herramientas más útiles en toda página web. Es aquella que recoge información del visitante y, o bien se almacena en el servidor, o bien se nos envía a través de una dirección de correo electrónico.

Son los formularios.

Para insertar un formulario: Pinchamos en para que se desplegue el panel:

si no está ya desplegado, y elegimos la pestaña

Colocamos el cursor en el sitio donde queramos que se coloque el formulario y

pinchamos en el icono .

Aparecerán los límites del formulario representados por un rectángulo cuyos lados son una línea discontinua de color rojo:

Ahora, por motivos estéticos, vamos a colocar una tabla dentro del formulario con dos columnas y varias filas: Situamos el cursor dentro del rectángulo de líneas discontinuas, introducimos la tabla y la centramos:

Vamos a emplear, la columna de la izquierda para realizar la pregunta correspondiente (justificado a la derecha) y la columna de la derecha para colocar los objetos de formulario (justificado a la izquierda).

57

Campo de texto.

Vamos a hacer, como ejemplo, un formulario que recoja la opinión sobre esta página web. Empezamos con el primer Objeto de formulario: Campo de texto.

Situamos el cursor en la primera celda, alineamos a la derecha y escribimos, por ejemplo, Nombre:

En la primera celda de la derecha insertamos un campo de texto

Nuestro formulario tendrá este aspecto:

Y,debajo, aparecerá la ventana de propiedades del campo de texto:

Allí podemos elegir la anchura del campo, el número de caracteres máximo, si queremos que conste de una o varias líneas, si queremos que se oculte al ser escrito (tipo contraseña), si queremos que aparezca un texto inicialmente y, lo que es más importante, el nombre que le queremos dar: Quitamos textfield y ponemos: nombre

Botón de opción.

Vamos ahora a preguntar la opinión sobre la página. En la segunda celda de la columna

de la derecha, insertamos un botón de opción .

Nuestro formulario tendrá este aspecto:

58

Y, debajo, aparecerá el panel de propiedades del botón:

En la primera casilla de la izquierda borramos radiobutton y escribimos el nombre de la opción global: opinion En la segunda casilla al lado de Valor activado, escribimos lo que corresponda con esta primera opción que puede ser: muy buena. Podemos elegir que esta opción esté activada o desactivada de entrada. Tenemos que escribir a la derecha del botón el texto que verá el visitante: Muy buena, excelente. El formulario irá quedando así:

Tenemos que seguir insertando los demás botones de opción correspondientes a esta misma cuestión. Por lo tanto los siguientes botones se deberán seguir llamando opinion y en cada caso habrá que escribir lo que corresponde con esa opción.

Para que el segundo botón no quede muy separado del primero le damos un salto de línea ¿recuerdas? Insertar > Caracteres especiales > Salto de línea

El segundo botón, por ejemplo, debería quedar así:

59

Ponemos un tercer botón con la opción de que la página es Mala.Bastante mala: Ya sabes el mismo nombre: opinion y como valor activado: mala.

Si queremos colocar otra pregunta de opción deberemos llamarla de otra manera para que no se excluyan las selecciones. Por ejemplo podemos preguntarle al visitante sobre sus conocimientos de informática. El nombre de la opción podría ser conoc_infor (por ejemplo)

El formulario va teniendo este aspecto:

60

Casillas de verificación.

Vamos a insertar ahora casillas de verificación (permiten elegir varias opciones). En nuestro caso, podríamos hacerlo con las cosas que le han gustado o llamado la atención de este curso de Dreamweaver.

Introducimos la pregunta en la siguiente celda de la izquierda ¿Qué es lo que más te ha gustado del curso?. En la celda de la derecha introducimos la primera casilla de verificación pulsando en el icono correspondiente.

Le ponemos un nombre a la casilla, por ejemplo, gustado, y, como primer valor uno de los que se nos puedan ocurrir, por ejemplo,paso a paso (para Valor activado) y una frase un poco más construida para el formulario visible.

Damos un salto de línea e introducimos nuevas casillas, siempre con el mismo nombre, gustado, y una frase nueva como Valor activado que debe ser una expresión corta de lo que escribamos en el formulario. Esta parte del formulario podría quedar así:

61

Listas y menús.

A continuación, podemos incluir un menú o lista desplegable. La diferencia entre menú y lista es que la lista permite varias elecciones y el menú una única. Podemos hacerlo, por ejemplo, preguntando por la edad del visitante. Escribimos la pregunta en la siguiente celda Indica tu edad e incluimos el menú en la celda de la derecha pulsando en

.

Le damos un nombre a la Lista/menú, por ejemplo, edad y pulsamos . Aparecerá la siguiente ventana:

62

Vamos escribiendo en los elementos del menú. En Valor escribimos lo mismo (será lo que aparezca al ser enviado el formulario). Pulsando la tecla para incluir el siguiente y la tecla para quitar uno ya introducido. Con las flechas vamos cambiando el orden de las etiquetas de elemento.

Cuando lo tengamos todos le damos a Aceptar.

Las diferentes etiquetas no aparecen, sólo lo harán al lanzar la página con el navegador:

Podemos incluir una campo de texto para comentarios. Lo podemos hacer con el botón

de Campo de texto definiendo en las

propiedades, o bien, dando directamente al botón: (Área de texto):

Lo introducimos:

63

Podemos introducir ahora (campo de texto) la dirección de correo electrónico del visitante. En este caso, podemos poner un Valor inicial:

Botones (Borrar y Enviar).

Finalmente, tenemos que insertar un botón para enviar el formulario y, si lo deseamos, un botón para borrar todo lo que haya podido escribir el visitante. Empezamos por el de borrar:

Vamos a colocar el botón de borrar en la última celda de la izquierda alineado a la derecha. Colocamos el cursor en la celda, alineamos y pulsamos el icono . Por defecto, Dreamweaver coloca el botón de Enviar.

Nosotros modificamos de la siguiente forma:

64

A continuación, nos colocamos en la celda de la derecha, alineamos a la izquierda, pulsamos el icono Aparecerá, de nuevo la ventana anterior que modificamos, esta vez ligeramente:

Podemos dar por finalizado nuestro formulario. Queda por definir la acción que queremos que haga una vez relleno. Para usuarios personales, la opción más habitual es el envío por correo electrónico de los datos obtenidos. Esto se hace colocando el cursor en cualquier punto del formulario y eligiendo <form> desde la barra de estado:

. Aparecerán las propiedades del formulario:

En Acción escribimos mailto:direcciondecorreo. Por ejemplo en mi caso, escribiría mailto:[email protected]

De todas formas, para que el envío del formulario pueda leerse como un mensaje de correo ordinario, hay que escribir en la etiqueta del formulario del código fuente el atributo enctype="text/plain".

Podemos intentar seleccionarlo del menú: Si no está allí tenemos que escribirlo directamente en el código. Seleccionamos el formulario colocando el cursor y pulsando <form> de la barra de estado. Pulsamos el botón para acceder al código:

Incluimos lo acordado:

Vemos, de nuevo, las propiedades del formulario:

65

Nuestro formulario ya tiene que funcionar. Lo guardamos primero, lo lanzamos con el navegador, y realizamos un rellenado de prueba para ver si lo recibimos satisfactoriamente por el correo electrónico.

Antes de dar por concluido el formulario podemos hacer alguna modificación en la tabla, añadiendo algún color de fondo para separar unas filas de otras. Con el cursor (arrastrando) seleccionamos la primera fila:

Y en la ventana de propiedades de la fila

Elegimos un color de fondo:

Elegimos otro color para la segunda fila y vamos alternando.

66

Estilos CSS

Los Estilos en cascada, estilos css, nos permiten controlar los parámetros de estilo para todos los documentos que forman un sitio web. Esto es así cuando los estilos css los definimos en una hoja externa, por otro lado, la forma más rentable de trabajar esta herramienta. Por ejemplo el Tutorial Dreamweaver MX de iniciación al editor, estaba controlado por una hoja de estilos que definía una serie de valores de color, forma, tamaño, para unas cuantas de las palabras y textos empleados en el sitio. Definir así los estilos de un sitio le da una coherencia y sensación de unidad que, de otro modo, es difícil de conseguir. Por otro lado, si un estilo no nos gusta una vez ya realizado todo el sitio, bastará modificar el estilo concreto en esa hoja, para que se modifique en todos los documentos que formen el sitio y que estén vinculados con esa hoja de estilos.

Para crear una hoja de estilos css, teniendo abierto cualquier documento del sitio, le damos a Ventana > Estilos CSS

En la columna de la derecha se abrirá:

Ahora pincharemos en el icono de y aparecerá la siguiente ventana:

67

En esta ventana podemos darle un nombre al estilo que vamos a crear (por defecto el programa le da el nombre .unnamed1).

Podemos elegir si lo que queremos es definir un estilo personal, o bien, redefinir una de las etiquetas del lenguaje HTML. (Más adelante explicaremos la tercera opción: Usar selector CSS).

Por último podemos definir el estilo en una hoja externa o bien, que se aplique únicamente al documento en el que estamos trabajando.

Vamos a empezar trabajando los valores que están elegidos por defecto:

• Le damos un nombre a nuestro estilo, por ejemplo, palabrasclave • Será un estilo personal. • En una hoja externa.

Cambiamos el .unnamed1 por .palabrasclave (si no ponemos el punto al comienzo, Dreamweaver lo hará por nosotros) y, sin más, le damos a Aceptar. Aparecerá la siguiente ventana:

En esta ventana nos aparece la carpeta raíz del sitio, en este caso, la carpeta para este sitio de ejemplo que he llamado webDreamMXcurso . Le daremos un nombre en Nombre de archivo (por ejemplo hoja1) y pulsaremos Guardar:

68

Se abrirá la siguiente ventana para que definamos el estilo:

Por ejemplo:

69

Y le damos a Aceptar

Podemos observar la inclusión del estilo que acabamos de definir:

Y, por otro lado, vemos la hoja de estilos dentro de los archivos del sitio:

70

Si hacemos doble clic sobre el icono veremos los estilos definidos en nuestra hoja:

Volvemos a nuestro documento para aplicar nuestro estilo: Seleccionaremos la palabra a la que se lo queramos aplicar, abriremos de nuevo (o vamos directamente a ) los Estilos CSS desde Ventana > Estilos CSS y haremos clic en el estilo palabrasclave.

El texto seleccionado pasará a estar escrito con los parámetros definidos.

Si una vez definido el estilo, no nos gusta, podemos modificarlo haciendo doble clic en el estilo correspondiente .

Para definir otro estilo, dentro de la ventana le damos al icono y se abrirá la ventana Nuevo estilo. Le ponemos un nombre, por ejemplo, .texto1 y lo definimos

Esta es la definición que he hecho:

71

Este estilo lo quiero aplicar a todos los párrafos que escriba en los documentos. Para hacerlo bastará colocar el cursor en el inicio del párrafo y hacer clic sobre el estilo

. Observa que, si dentro del párrafo, hay una palabra ya definida como palabraclave el estilo de ésta no se va a modificar. Un estilo prevalece sobre el otro.

Para acabar este apartado, defino otro estilo para los títulos de los apartados y lo aplico. Nuestra hoja tiene, ahora, estos tres estilos definidos:

Empezamos con otro nuevo documento.

Para vincular este documento con la hoja de estilos que ya tenemos creada, le damos a Ventana > Estilos CSS y se abrirá la columna de la derecha desplegándose

72

Ahora pinchamos en el icono de y se abrirá:

Nuestra hoja está en el sitio web en el que estamos trabajando. Por eso, no hay que importarla de ningún otro sitio. Le damos a Examinar... y se abre:

Seleccionamos nuestra hoja1 y le damos a Aceptar:

73

Volverá a salir la ventana anterior con la hoja ya seleccionada:

Le damos a Aceptar.

En el desplegable Diseño se habrán colocado todos los estilos definidos en la hoja1 que acabamos de vincular:

Y podremos aplicar los estilos creados a las palabras o párrafos que nos interese. Observad que el estilo texto1 se aplica automáticamente conforme pulsamos la tecla Enter y creamos un nuevo párrafo.

74

Un vistazo al código fuente generado

Pinchamos en el icono para ver el código fuente.

Vemos que en la cabecera del documento entre las etiquetas <head> y </head> se ha vinculado el documento con la hoja de estilos que hemos llamado hoja1

Más adelante, cada vez que hacemos uso de uno de los estilos definido dentro de esa hoja se genera una etiqueta

<p class> o <span class> que afecta al párrafo o al texto seleccionado:

Los estilos que hemos definido han sido de la categoría tipo:

Como se puede ver hay un montón más de categorías que se pueden definir.

Nosotros, de momento, vamos a pasar a ver los estilos que redefinen una etiqueta HTML.

75

En primer lugar, vinculamos nuestro documento con la hoja de estilos hoja1 que tenemos creada: Ventana > Estilos CSS , pinchamos en :

Le damos a Examinar:

Seleccionamos la hoja1 y le damos a Aceptar

Volvemos a Aceptar

Ahora pinchamos en el icono para crear nuevo estilo. Se abrirá:

76

Pero ahora seleccionamos Redefinir etiqueta HTML.

Ahora si pinchamos en la flechita de Etiqueta se desplegará:

Probablemente, muchas de las personas que lean este tutorial, desconocerán algunas o muchas de las etiquetas que aparecen en este listado. No es obligatorio conocerlas y, además, Dreamweaver las escribe por nosotros. Nosotros, sólo a modo de ejemplo, vamos a redefinir la etiqueta <a> que es la etiqueta de los enlaces. Bien; la seleccionamos:

77

y le damos a Aceptar. Aparecerá la ventana de Definir el estilo:

Definimos el estilo y elegimos Decoración: ninguna:

78

Le damos a Aceptar.

¿Qué hemos hecho? Hemos indicado al programa que, aparte del tipo de fuente, del tamaño y del grosor, cuando haya un enlace, el vínculo no esté subrayado. Como esto lo hemos definido dentro de la hoja de estilos hoja1, lo que acabamos de hacer tiene influencia en todos los documentos vinculados con la hoja, también en los creados anteriormente.

Ahora vamos a añadir un efecto a este estilo: Queremos que cuando pase el puntero del ratón por el vínculo, éste se subraye.

Para ello volvemos a pinchar en el icono y ahora marcamos Usar selector CSS

En Selector: elegimos a:hover

79

Le damos a Aceptar y aparecerá la ventana de Definición de estilo. Marcamos subrayado y le damos a Aceptar.:

Observa que lo que acabamos de hacer no se guarda como un estilo a aplicar:

De hecho, siempre que establezcamos un enlace se van a implementer las características de estilo definidas. Sin embargo, si pinchamos en Editar estilos, sí aparece la redifinición de la etiqueta <a> :

80

Haciendo doble clic sobre este estilo, o sobre cualquier otro, podremos modificar las características del mismo.

Como se ha podido intuir, las hojas de estilo tienen una gran potencialidad y sus posibilidades son muchas. Nosotros sólo nos hemos asomado a unas pocas de las utilidades que tiene esta herramienta. Se deja para el lector la experimentación y profundización a partir de las pistas dadas.

81

Los colores.

A estas alturas ya hemos empleado unas cuantas veces las paletas de color del Dreamweaver.

Si ninguno de estos colores nos gusta, pulsando en podemos crear nuestros propios colores:

Códigos de color.

Supongamos que quiero cambiar el color de esta palabra. La selecciono y la pongo de color más o menos azul.

Ahora voy a ver qué ha pasado en el código fuente:

El código del color está formado por 6 símbolos alfa-numéricos precedidos del símbolo #.

82

Los símbolos alfa-numéricos son las diez cifras numéricas y las seis primeras letras del alfabeto ordenadas de la siguiente forma:

0 1 2 3 4 5 6 7 8 9 a b c d e f

Siendo 0 el valor mínimo y f el valor máximo.

A su vez los seis símbolos se dividen en tres grupos de dos símbolos:

• El primero de dos símbolos indica la cantidad de rojo (00 es el mínimo y ff el máximo)

• El segundo de dos símbolos indica la cantidad de verde (00 es el mínimo y ff el máximo)

• El tercero de dos símbolos indica la cantidad de azul (00 es el mínimo y ff el máximo)

Las mezclas y combinaciones de cantidad van dando origen a los diferentes colores.

ffffff 000000 ff0000 00ff00 0000ff ffff00 cccccc ff00ff

Es el denominado código hexadecimal.

Este código también se puede sustituir por la palabra inglesa que define el color. Así red será lo mismo que #ff0000 o green será lo mismo que #00ff00. El problema viene cuando no es un color primario ni secundario. Por ejemplo, el color blanchedalmond se corresponde con el código hexadecimal #ffebcd y es el siguiente color

Observa que he rellenado la celda con el color escribiendo en el inspector de propiedades el código nombre del color:

83

Imagen de sustitución (roll-over).

Es una imagen, vínculo a otro documento, que cambia de aspecto al pasar el puntero del ratón por encima de ella.

Primeramente deberemos tener, lógicamente, preparadas las dos imágenes y guardadas en cualquier parte del ordenador.

Le damos a Insertar > Imágenes interactivas > Imagen de sustitución


En el Nombre de la imagen podemos dejar la que aparece por defecto.

En la Imagen original e Imagen de sustitución le damos a Examinar para buscar las imágenes que tenemos guardadas en el ordenador.

El programa nos avisará que las imágenes no están guardadas dentro de la carpeta raíz del sitio y que debemos guardarlas dentro de esa carpeta:

84

Le decimos que Sí y guardamos las imágenes dentro de nuestro sitio en la carpeta que hayamos creado para dejar las imágenes (o sueltas dentro de la carpeta raíz del sitio).

Después escribimos la URL completa de la página a la cual queremos enlazar la imagen en el caso de que el enlace sea a un documento externo. O bien le damos al botón Examinar en el caso de que nuestro enlace vaya a un documento de nuestro sitio. Y ya está:

En el ejemplo, hemos puesto una imagen con un enlace a un documento externo: El curso de Turismo Rural del Proyecto Mentor de Enseñanza Telemática del MECD. Para ver el efecto pulsamos la tecla F12 y lo probamos con el navegador.

85

Álbum de fotos.

Una opción muy interesante es la creación de un álbum de fotos.

Para hacerlo es necesario tener instalado en el ordenador una versión de Fireworks la herramienta gráfica de Macromedia. Desde este sitio: http://www.macromedia.com/software/trial_download/ puedes descargarte una demo.

Para crear el álbum, lo primero que hay que hacer es tener en una carpeta, en cualquier parte del ordenador, las fotografías guardadas. En el caso que vamos a poner de ejemplo, las fotos están guardadas en una carpeta en D con el nombre fotos_ayerbe. Son fotografías del entorno de Ayerbe (Huesca) el sitio donde nací hace ya unos cuántos años...

Empezamos: Aunque el álbum no se va a colocar en el documento donde estemos trabajando, es necesario tener cualquier documento abierto para acceder a Comandos > Crear álbum de fotos web...

En el caso de que no se tenga el Fireworks en el ordenador aparecerá la siguiente ventana de advertencia:

Y se podrá ir a la página de Macromedia para descargar una demo del programa.


86

Ponemos un Título a nuestro álbum y una información de subencabezado, si se desea.

Examinamos la carpeta origen de las imágenes (en este caso en D: fotos_ayerbe):

Le damos a Abrir y aparecerá la carpeta:

87

Aunque aparezca vacía, la carpeta contiene las imágenes previamente guardadas. Le damos a Seleccionar.

A continuación pinchamos en Examinar... de la Carpeta de destino. Se abrirá la carpeta raíz del sitio y allí deberemos crear una nueva carpeta con el nombre que queramos, por ejemplo, album1

88

Para crear la carpeta, pinchamos en el icono . Inmediatamente aparecerá la nueva

carpeta a la que cambiaremos el nombre tal como hemos quedado por album1.

El tamaño de la miniatura puede estar bien (lo podemos modificar si queremos).

Desactivamos la casilla de mostrar nombre de archivos.

Elegimos el número de columnas que deseemos tenga la página inicial.

Ésta ha sido mi ventana completada:

Le damos a Aceptar y saltará el Fireworks procesando la información de cada imagen. Al final aparecerá el mensaje:

Y se presentará en pantalla la primera página del álbum con todas las miniaturas (thumbnails). Podemos modificar los textos introducidos, colocar una imagen o color de fondo, centrar el texto,... para mejorar el aspecto de la página.

89

Modificar el álbum.

Para empezar echamos un vistazo a las carpetas creadas. Vamos a la columna de la derecha, la abrimos si no está abierta y desplegamos :

Vemos que se ha creado 1 carpeta con el nombre de album1, dentro de la cual hay otras tres carpetas y un archivo nuevos.

Las carpetas son:

• images (que contiene las imágenes del álbum) • pages (que contiene las paginas que soportan cada una de las imágenes) • thumbnails (que contiene las miniaturas)

Y el archivo es el index.htm. Es la primera página que contiene las miniaturas de todo el álbum.

Si abrimos el index.htm (de la carpeta album1) veremos algo así:

90

Vamos a centrar los textos. Cambiar el color de los mismos, cambiar el fondo... Lo hacemos como ya sabemos pues se trata, simplemente, de una página web.

Una vez arreglada la primera página, abrimos cada una del las pages y vemos cómo se han creado:

91

Evidentemente el nombre del archivo (Aguero_40.jpg.jpg en este caso) sobra. Así que lo eliminamos.

La imagen, por otro lado, debería estar centrada. Una forma buena de hacerlo es seleccionar todo: Pinchamos en cualquier parte dentro de la tabla y, después en . Se seleccionará toda la tabla que contiene el título, los enlaces para navegar y la imagen. Después desde el inspector de propiedades de la tabla le decimos Alinear: Centro.

92

Botones Flash.

Los botones flash son elementos animados que sirven como enlaces.

Para ver las posibles opciones de botones pincha aquí.

Para insertar un botón le damos a Insertar > Imágenes interactivas > Botón Flash


En Estilo eliges el botón que quieras. En Muestra verás el botón elegido.

En Texto del botón escribes lo que quieres que aparezca en el botón.

Puedes elegir el tipo de fuente y el tamaño.

93

En Vínculo escribe la dirección URL completa si es un vínculo externo, o dale a Examinar y elige el archivo en caso de ser un vínculo a un documento de la propia web.

En Destino puedes elegir que se abra en la pantalla completa (_top), en ventana nueva (blank),...

Puedes elegir el color de fondo que rodeará al botón ( a veces, según el botón, no se ve apenas nada).

Finalmente puedes dejar el nombre por defecto o poner otro. Es importante saber que los botones tienen que estar en la misma carpeta que el documento. No pueden estar en carpetas diferentes.

Le damos a Aceptar y el botón se habrá colocado en el sitio elegido.

Vamos a colocar un botón a continuación de esta línea con enlace a otra página de este sitio:

Esto ha sido lo que he escrito:

Si una vez hecho el botón, quieres modificar alguna de las propiedades del mismo basta con hacer doble clic sobre el botón para volver a la ventana anterior y poder hacer los cambios oportunos.

94

Si, en cambio, haces un único clic se obtiene la ventana:

95

Texto Flash.

Otra forma muy sencilla de crear botones con animación para los vínculos es, con el denominado, texto flash.

Le damos a Insertar > Imágenes interactivas > Texto Flash

Nos aparecerá la siguiente ventana:

Aquí podemos elegir el tipo de fuente, el tamaño, negrita, cursiva, el tipo de justificación dentro del botón, el texto que va a tener... Elegimos el archivo con el que se vincula, el destino: si es en ventana nueva o en toda la pantalla, el color de fondo y el nombre con el que lo vamos a guardar...

Esto ha sido lo que he escrito en la ventana:

96

Haciendo doble clic sobre el botón se vuelve a la ventana anterior.

También haciendo un solo clic se abre esta ventana:

En ella se pueden hacer algunos cambios, ver el comportamiento y, en todo caso, volver a la pantalla de Insertar texto Flash dándole a

97

Barra de navegación

Si has llegado hasta aquí es gracias a la Barra de Navegación que tienes encima de estas líneas.

Es una herramienta de Dreamweaver que permite la navegación por el sitio de manera similar a los botones flash. La ventaja de la Barra es que nos indica el botón que hemos pulsado en un momento determinado, lo que no ocurre con los botones flash ni con el texto flash.

La desventaja es que tenemos que tener previamente preparadas y guardadas las imágenes.

Para hacer las imágenes yo empleo PhotoShop. Esta es una buena dirección en la que

puedes aprender sobre este programa gráfico:

Para cada botón de la barra tenemos que tener preparadas un máximo de cuatro imágenes. No es necesario llegar hasta el máximo. En realidad, la última imagen no es necesaria en absoluto. La Barra de Navegación de este Tutorial sólo tiene 3 imágenes.

Voy a poner un ejemplo de barra de navegación con tres botones. Estas son las imágenes que he preparado para cada botón:

Para insertar la Barra: Insertar > Imágenes interactivas > Barra de navegación:


98

Empezamos con Nombre de elemento: Escribimos el nombre y vamos seleccionando las imágenes que hemos ido guardando en una carpeta (mejor dentro de la carpeta raíz del sitio). Yo las he guardado en una carpeta denominada ima.

Si la barra se coloca dentro de un marco y éste no ha sido guardado, aparecerá la siguiente advertencia:

Al hacer clic, ir a URL: Darle a Examinar para buscar el archivo o escribir la dirección entera. La siguiente casilla indica donde se va a cargar. Yo lo voy a hacer dentro de un marco, por eso estará la opción: main-frame (marco principal). Las demás opciones las dejamos como están.

Por último podemos apilar los botones Horizontalmente o Verticalmente o bien usando tablas para que queden sujetos a la distribución que queramos. Posteriormente cada botón se puede colocar en una celda distinta de la tabla.

99

Esta es la ventana rellena para el primer elemento de la tabla.

Para insertar el segundo elemento pinchamos en y rellenamos los datos. Cuando hayamos acabado con todos los elementos pulsamos Aceptar.

Si queremos modificar la barra una vez creada, hay que hacer como si fuésemos a crear una nueva. El programa nos advertirá:

Le damos a Aceptar y nos encontraremos con los elementos de la tabla. Los podremos seleccionar y hacer las modificaciones oportunas:

101

Plantillas.

Una plantilla es una estructura en la que hay partes no editables (que no se van a poder modificar) y otras que son modificables para llenarse de contenido.

Es una utilidad aconsejable cuando se van a repetir determinados documentos en los que unas partes van a permanecer fijas y otras van a cambiar. Ahorra trabajo y permite la presentación de determinados contenidos con una unidad de estilo.

Vamos a poner como ejemplo la realización de la siguiente plantilla:

Empezamos abriendo desde Archivo de la barra superior

Elegimos la pestaña General y seleccionamos Página de plantilla y, dentro de ella, Plantilla HTML :

102

Se abre el documento y, en él, podemos empezar a trabajar y colocar los distintos elementos:

En el caso que estamos haciendo de ejemplo, una tabla:

103

Una vez finalizado tenemos que elegir los elementos que van a poder ser modificados: Primero seleccionamos el elemento modificable (en el primer ejemplo el 2 del número del tema) y abrimos Insertar > Objetos de plantilla > Región editable

Se abrirá la siguiente ventana:

Le cambiamos el nombre:

104

Y le damos a Aceptar.

Repetimos el proceso para todos los demás elementos editables. Éste es el resultado final:

Lógicamente el nombre de los elementos editables solamente se ve dentro de Dreamweaver. Cuando se visite la página con el navegador, no se notarán las diferencias entre las regiones editables y no editables, nada señalará unas partes u otras.

Ahora lo guardamos como plantilla: Archivo > Guardar como plantilla...

El programa nos permite elegir el sitio donde guardar la plantilla y el nombre con el que guardarla:

105

En nuestros archivos se habrá creado una carpeta con el nombre Templates y, dentro de ella, la plantilla que acabamos de crear. (A veces no se visualiza inmediatamente, hay que cerrar y abrir de nuevo el sitio para que se haga visible la carpeta):

Ahora, para crear un documento basado en esa plantilla, abrimos Archivo > Nuevo > Plantillas. Y le damos a crear

106

Se abrirá la plantilla y podremos modificar, o no, los elementos editables. Bastará guardar como un documento nuevo cada una de las modificaciones para hacer funcionar la plantilla.

107

Notas.

Es una herramienta de Dreamweaver muy útil cuando el sitio se construye entre varias personas o cuando queremos realizar alguna anotación que nos sirva para el futuro.

Las Notas se pueden adjuntar a cualquier archivo, documento, imagen,... Lógicamente estas notas son para uso de los diseñadores del sitio y no las verán los visitantes de la página.

Para adjuntar un archivo de notas una de las formas de hacerlo es:

Desde la vista pinchamos con el botón derecho del ratón en el archivo al que le queremos adjuntar las notas y en el menú contextual elegimos Design Notes...:


108

Escribimos lo que nos parezca oportuno en el cuadro de texto principal:

En Estado: puedo elegir entre unas cuántas opciones y abajo puedo elegir que las notas se abran al abrir el archivo (lo que es bastante recomendable).

109

Para abrir las notas, puedo volver por el camino que llevé al escribirlas, o bien, en la vista de ,con el documento concreto seleccionado, pinchamos en

y seleccionamos Design Notes... Las notas se volverán a abrir y podremos modificarlas.

Lo mismo que hemos hecho con un archivo .htm podemos hacerlo con una imagen, una carpeta,... Botón derecho del ratón > Menú contextual > Design Notes.

110

Meta tags.

Para que nuestro sitio sea encontrado por los buscadores debemos hacer varias cosas.

La primera de ellas es poner, en la cabecera de cada uno de los documentos que forman nuestro sitio, una información determinada colocada entre las denominadas meta tags o meta etiquetas.

Supongo que ya sabes algo de la cabecera de los documentos. Es la parte del mismo comprendido entre las etiquetas <head> y </head>. En esta parte se coloca el título del documento (entre <title> y </title>) y algunas otras cosas que, aunque en principio no son visibles en el cuerpo del documento (lo comprendido entre <body> y </body>), sí que pueden tener influencia en él. Es el caso de las vinculaciones a hojas de estilo externas o de los scripts.

Nosotros, de momento, vamos a concentrarnos en estas etiquetas que no tienen ninguna influencia en la parte visible del documento. Sirven, como ya se ha dicho, para que nuestro sitio sea localizado por los robots o motores de búsqueda que emplean los buscadores de la red.

Vamos a comenzar colocando las etiquetas e información que yo he puesto en este sitio:

<html>: Comienza el documento.

<head>: Comienza la cabecera del mismo.

<title>: El título que hemos puesto al documento

<meta http-equiv... : Es una etiqueta generada automáticamente por Dreamweaver.

111

<link rel= ... : Es la referencia a que ese documento está vinculado con la hoja de estilos hoja1.

<meta name="Title" : Es el comienzo de las meta tags propiamente dichas. La primera de ellas es el título del documento o del sitio (mejor el del sitio pues es lo que queremos que se encuentre). Como esta información es para los robots y motores de búsqueda yo no pondría acentos ninguno.

<meta name="Author" : El nombre del autor del sitio.

<meta name="Subject" : El tema del sitio.

<meta name="Description" : La descripción del sitio.

<meta name="Keywords" : Palabras clave. Es muy importante esta etiqueta. Hay que escribir palabras sueltas separadas por comas. Se pueden poner juntas dos o más palabras también, pero no hay que hacer frases...

<meta name="Generator" : El nombre del editor con el que has hecho la página.

<meta name="Language" : El idioma.

<meta name="Revisit" : Se indica la periodicidad en la que se pueden realizar cambios.

<meta name="Distribution" : Se indica que nuestro sitio es de incumbencia general.

<meta name="Robots" : Indicamos que todos.

</head>: Se acaba ya la cabecera.

¿Como escribir estas etiquetas?

Una forma es copiar estas mías (Con el navegador Explorer: Botón derecho > Menú contextual > Ver código fuente). Se abrirá el Bloc de Notas. Seleccionar lo que nos interese y copiar. Abrimos un documento nuevo del Bloc de Notas, pegamos y modificamos lo que sea necesario. Cuando ya esté, seleccionamos y copiamos. Vamos al documento, pinchamos en para acceder al código fuente. Allí pegamos nuestras etiquetas entre </title> y </head>.

Otra forma de hacerlo:

En pinchamos en la pestaña . Aparecerán, debajo, los iconos:

Ahora pinchamos en . Se abrirá la ventana:

112

Podemos emplear esta herramienta cuántas veces haga falta para las primeras meta tags: Title, Author, Subject :

Le damos a Aceptar y volvemos a pulsar :

Hacemos lo mismo para la siguiente meta tag : Subject.

Ahora pulsamos para escribir la descripción:

113

Le damos a Aceptar. Pulsamos para escribir las palabras claves separadas por comas:

Y así sucesivamente con las demás etiquetas, dándole al icono que es el genérico.

114

Refresh.

Con esta palabra indicamos que la página que estamos visualizando en un momento determinado se va a cambiar por otra elegida por el diseñador de la web. El visitante no va a poder hacer nada más que esperar esa actualización.

En este sitio web hay un "refresh" en la primera página. Al cabo de un cierto tiempo se cambia por otra.

Para insertar una actualización automática de este tipo:

Abrimos si es que no está abierto y pinchamos en la pestaña .

Nos aparecerán los siguientes iconos:

algunos de los cuales ya son conocidos. Pinchamos en . Se abrirá:

Le tenemos que poner el tiempo que queremos que permanezca la página antes de cambiar y elegir el documento al cual queremos que salte, dándole a Examinar y seleccionando el archivo, o bien, escribiendo toda la URL en el caso de que sea un enlace a un documento ajeno a nuestro sitio.

En el código, dentro de la cabecera (entre <head> y </head>),se habrá generado una línea como ésta:

115

Que indica que va a tardar 15 segundos en cambiarse la página a otra que se ha llamado con el nombre de tuto_dreamweaverMX.

116

Mapas de imágenes para enlaces.

Con Dreamweaver es muy fácil "mapear" una imagen para hacer que cada una de las zonas elegidas de la imagen sea un vínculo con un documento diferente.

Una vez insertada en el documento la imagen:

Y, con ella seleccionada, elegimos una de estas tres herramientas del panel del Inspector de propiedades:

La primera herramienta se usa para hacer zonas rectangulares.

La segunda herramienta se usa para hacer zonas circulares.

La tercera herramienta se usa para hacer zonas poligonales.

Vamos a emplear esta última para seleccionar la zona de la Entrada y Pasillo en forma de "ele". Vamos pinchando de manera ordenada en cada uno de los seis vértices de este polígono:

117

Observa que la zona seleccionada se queda sombreada de color azul.

En el panel que aparece seleccionamos el Vínculo y el Destino y escribimos el texto Alt que aparecerá al situarse el puntero del ratón sobre el enlace:

118

Capas

Es difícil definir qué es una capa.

Una de las formas consistiría en imaginar que es una página web dentro de otra página web. En realidad varias páginas web dentro de una página porque capas puede haber todas las que queramos.

Dentro de cada una de las capas se puede insertar texto, imágenes,... (en realidad hemos quedado que la imaginamos como una página web dentro de otra). La característica más importante de la capa es que la puedo mover para colocarla exactamente donde quiera. Así puedo colocar una imagen dentro de una capa y, una vez dentro, mover la capa para que la imagen se coloque exactamente en el sitio deseado. Esto es difícil de conseguir por otros medios...

A las capas también se les puede adjuntar "comportamientos" que son fragmentos de javascript que permiten al visitante interactividad con la página.

Para insertar una capa: Insertar > Capa

Aparecerá la capa:

El icono nos va a indicar cada una de las capas que incorporemos a la página.

Pinchando en él se selecciona la capa. También podemos seleccionar la capa pinchando

en el cuadrado . Cuando la capa está seleccionada tiene este aspecto:

119

El cuadrado sirve, además de para seleccionar la capa, para arrastrarla hasta el punto exacto que deseemos. Con los cuadrados rellenos: podemos estirar o encoger la capa adaptando su tamaño a las necesidades.

Cuando la capa está seleccionada y teniendo abierto el panel de propiedades, aparece la información sobre las propiedades de esa capa:

La ha llamado Capa 1 (Layer 1), viene la anchura y la altura y nada más, porque no hemos puesto nada en la capa. (En realidad, de momento, no he puesto en la página ninguna capa, esto era una prueba para capturar las imágenes y los paneles).

Trabajar con capas.

Vamos a hacer un trabajo concreto con capas para aprender sobre su funcionamiento e intuir posibles utilidades.

El trabajo que quiero hacer es un pasatiempo denominado "cuadrado mágico". Consiste en colocar determinados números en un cuadrado con un número igual de filas y de columnas de tal manera que las filas sumen lo mismo que las columnas y las diagonales del cuadrado.

Nuestro cuadrado mágico va a ser de 3 filas x 3 columnas, nueve casillas en total a ocupar por las cifras del 1 al 9. La suma de todas las filas y de todas las columnas y diagonales debe ser 15.

120

Lo que primero hay que hacer es diseñar, con un programa gráfico, las 9 cifras:

Es importante realizar cada imagen con un tamaño "redondo". En el ejemplo miden 100 x 100 píxeles.

A continuación iremos insertando capas e introduciendo una imagen dentro de cada una de las capas (observa que el cursor esté dentro de la capa antes de insertar la imagen).

121

Es conveniente cambiar el tamaño de la capa para adaptarla al contenido. Observa en el panel de Propiedades que la capa tiene el mismo tamaño que la imagen (100 x 100).

Desplazamos la primera capa a otro lugar de la pantalla para que se quede el icono arriba, desplazado respecto de la capa que representa y de su contenido.

Vamos incorporando nuevas capas y, en cada una de ellas, colocamos un número. Dreamweaver llamará a la primera capa Layer1 (y estará la imagen del 1) a la segunda capa Layer2 (y estará la imagen del 2)... Es conveniente ser consciente del nombre que Dreamweaver le va dando a cada capa (Inspector de Propiedades).

Desplazamos esta segunda capa con el número 2 cerca de la anterior para separarla del icono que la representa.

Cuando hayamos acabado tendremos en la parte superior izquierda de la página los nueve iconos que representan las nueve capas que hemos introducido.

122

Observa cómo, en el momento capturado por la imagen superior, está seleccionada la capa 9 en la imagen y en el icono: . Puedes ir pinchando en todos los iconos de capa:

para comprobar que se seleccionan todos y cada uno de los números. Ten abierto el Panel de Propiedades y comprueba, una vez más, el nombre de la capa.

A continuación vamos a colocar los números tal y como como van a estar en la solución final. Empezamos por la casilla superior izquierda que, en esta solución, va a ser el 4. Lo llevamos más o menos al centro de la pantalla y le damos a Ventana > Comportamientos

Se abrirá la siguiente ventana:

123

Ahora pincharemos en el icono y se desplegará el siguiente catálogo de comportamientos:

De todos los comportamientos elegimos Arrastrar capa (si no tuvieses activo este comportamiento al pinchar en la cruz, pincha dentro de la capa para seleccionar la imagen y vuélvelo a hacer).


Tenemos que:

• En Capa: Seleccionar la capa "Layer4" (Estamos colocando el 4). Muy importante.

• Movimiento: Dejamos Sin restricciones. • Pinchamos en Obtener posición actual para que se rellenen los números del

Destino de forma automática. • Ajustamos a 20 píxeles del destino. Esto quiere decir que, cuando el visitante

suelte el objeto a menos de 20 puntos de la solución, el objeto se colocará solo de manera exacta en el sitio que acaba de ser obtenido al pinchar en Obtener

124

posición actual. Lo que proporcionará belleza en la solución final y sensación de seguridad al saber que es esa la posición a la que había que llevar el objeto (en este caso el número).

Le damos a Aceptar y comprobamos nuestra capa en el panel de propiedades antes de pasar al siguiente número:

Si seleccionamos la capa comprobaremos su situación:

Vamos colocando cada uno de los números procurando que estén perfectamente alineados con sus vecinos. Podemos ajustar y modificar la posición escribiendo directamente en el panel de Propiedades la posición Iz y Sup:

Si el primer número ha quedado a 250 puntos de la izquierda y a 100 puntos de arriba, y cada capa (e imagen) ocupa 100 x 100, el segundo número deberá quedar a 350 puntos de la izquierda y a 100 puntos de arriba, el tercer número a 450 puntos y a 100 puntos respectivamente. El siguiente número será el primero de la segunda fila, por eso deberá estar a 250 puntos de la izquierda y a 200 puntos de arriba, el siguiente a 350 - 200, el siguiente a 450 - 200. Por último la tercera fila: 250 - 300 ; 350 - 300 y 450 - 300.

Repetimos el proceso indicado para el número 4 de añadir comportamiento "arrastrar capa" para cada uno de los números según se vayan quedando colocados en su posición

125

"de solución".Al número que vamos a colocar en el centro (el 5) no le adjuntamos el comportamiento de "arrastrar capa". Su posición será inamovible: El visitante de la página no lo podrá mover de su posición central.

Cuando lo hayamos acabado y, para que pueda ser un pasatiempo para el visitante, tendremos que desordenar los números: Cambiar los números que nos parezca excepto el del centro que no lo tocaremos. El visitante de la página recibirá el cuadro tal como lo hayamos guardado esta última vez, pero, al ser manipulado por él, el programa "recordará" la posición que tenía cuando el cuadro estaba bien resuelto y cada imagen se dejará llevar automáticamente a su posición correcta cuando el número se acerque menos de 20 puntos y el jugador suelte el ratón.

126

Limpiar el código generado por Word.

El procesador de texto Word permite la creación de una página web a partir, simplemente, de guardar el documento como página web.

El problema es que Word genera una tremenda cantidad de código que no es, en absoluto, necesario.

Veamos un ejemplo:

Escribo con Word 2000 el siguiente texto:

Que guardo como página web:

Vuelvo a abrir el documento y, pinchando en cualquier punto del mismo, con el botón derecho del ratón accedo a su código fuente:

127

Esto es un retazo de la tremenda cantidad de código generado:

Bien, con el explorador de Windows, metemos en nuestra carpeta raíz del sitio, este documento:

128

y lo abrimos desde el Dreamweaver.

Una vez abierto le damos a Comandos > Limpiar HTML de Word...


Le damos a Aceptar y aparece este mensaje de aviso:

129

Volvemos a darle a Aceptar. El documento ha quedado como estaba desde el punto de vista de su aspecto desde el navegador, pero, ahora, contiene exactamente este código:

Aún podríamos meternos en el código y cambiar el título por una expresión menos larga.

130

Publicar el sitio

Puede parecer un poco prematuro empezar ya a pensar en la publicación de nuestra página.

Tal como la tenemos apenas tiene un saludo de bienvenida... Carece de contenido y, pòr 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 tutoriales... 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.

Conseguir un servidor que nos la aloje.

Es la primera condición: Conseguir un host u ordenador servidor que nos haga un hueco en su espacio en internet. Hay algunos servidores que proporcionan espacio para webs de forma gratuita sobre todo si son de carácter personal o sin intereses económicos.

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.

El propio Dreamweavwer tiene la posibilidad de hacer conexión con el host remoto y transferir los archivos. Sin embargo, puede ser necesario tener instalado en nuestro ordenador un programa de FTP (file transfer protocol).

Transferencia desde Dreamweaver

Para transferir los ficheros desde el programa, en primer lugar hay que configurar los datos del sitio. Para ello, le damos a Sitio > Editar sitios...

Se nos abrirá la siguiente ventana:

131

Pulsamos el botón y pasaremos a:

(Nota: Pincha la pestaña en el caso de que no se abra por defecto)

132

Esta ventana define los Datos locales que ya están bien. No hay que añadir nada. Pulsamos Datos remotos y la ventana cambiará a:

Del menú desplegable Acceso elegimos FTP:

Y rellenamos las cajas de texto con los datos adecuados. En el caso que hemos puesto de ejemplo, la ventana quedaría así:

133

Los datos no marcados se dejan como están.

El Directorio del Servidor, o sea, la carpeta del servidor en la que se colocan los archivos, varía de un servidor a otro, pudiendo ocurrir que no haya que poner nada al no ser necesario que los archivos se coloquen dentro de ninguna carpeta.

Le damos a Aceptar y aparecerá la ventana ya conocida de Definir sitios. En este momento, como ya hemos definido nuestro sitio

134

Le damos a y ya está.

Ahora procedemos a conectar telefónicamente con el servidor. Para ello pinchamos en el botón que cambiará a y aparecerán esta ventana:

Cuando ya haya conectado aparecerá lo siguiente:

Observa que la vista ha cambiado a remota.

Cambiamos a Vista local en el menú de opción:

135

Seleccionamos el archivo que queremos transferir (en este caso el index.htm) y pulsamos la flecha . Aparecerá el siguiente mensaje:

Los archivos dependientes son las imágenes incrustadas en una determinada página. En nuestro caso, como no tenemos ninguna, le podemos decir que No pero es aconsejable darle al Sí cuando tengamos imágenes (aunque siempre se pueden transferir por separado).

Aparecerá el mensaje:

Y, si todo va bien, en unos momentos nuestra página estará en el servidor.

Dreamweaver señala que la transferencia ha acabado seleccionando los archivos que se transferían:

136

Puedes comprobarlo, de todas formas, yendo a Vista remota:

Y, mejor aún, saliendo del programa y yendo a internet para comprobar que la página se visualiza correctamente:

Tutorial Dreamweaver

Documents

Transcript of Tutorial Dreamweaver