DREAMWEAVER MX 2004

Organización de un sitio.

Antes de empezar a crear páginas Web, debe tener una idea del contenido que desea incluir en las páginas.
El desarrollo de una página Web es similar al diseño de un material impreso: primero debe elaborar el concepto. Debe hacerse, a sí mismo o a su cliente, algunas preguntas básicas. ¿Para qué se necesita el sitio Web? ¿Qué se intenta comunicar? ¿Quién es el público potencial de las páginas? ¿Qué impresión desea que los visitantes se lleven? Piense también qué navegadores podrían utilizar los usuarios. ¿Es probable que posean la versión más actualizada con todos los plug-ins más modernos? ¿Es más probable que trabajen con equipos anticuados y navegadores antiguos? El problema del navegador podría dictaminar si puede utilizar hojas de estilos en cascada o capas en las páginas.
También deberá elaborar un esquema del sitio. El esquema es similar al guión de un proyecto multimedia o una película, puesto que ofrece una idea del alcance del proyecto y es el punto de partida para la configuración de la estructura de archivos que se necesita. Reúna el texto y los gráficos de las páginas Web y estará listo para empezar a usar Dreamweaver a fin de poner esas ideas a trabajar.

Conceptos basicos de dreamweaver.

Al abrir Dreamweaver aparece la ventana de documento, donde se diseña la página, y varios paneles, en los que puede agregar o cambiar el texto y los objetos de la página. El panel de Objetos le permite agregar a la página objetos como imágenes, tablas, capas o animaciones Flash. El Inspector de propiedades le permite cambiar los atributos del texto seleccionado o de un objeto de la página. El acceso a todos los paneles y al Inspector de propiedades se realiza desde el menú Ventana.
Una marca de verificación junto a un elemento del menú Ventana indica que el panel está abierto, aunque podría estar oculto detrás de otro panel o de la ventana de documento. Para mostrar un panel oculto, selecciónelo otra vez en el menú Ventana.
Si selecciona un panel, pero aún no aparece, elija Ventana > Organizar paneles flotantes para restablecer todos los paneles abiertos en sus posiciones predeterminadas. El panel de Objetos se desplaza a la parte superior izquierda de la pantalla, el Inspector de propiedades se sitúa en la parte inferior y todos los demás paneles abiertos se desplazan a la derecha de la pantalla, sin solaparse.
Cuando el programa está abierto presenta una pantalla similar a ésta:

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 clikeamos 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:

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:

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.

Volveremos a la ventana múltiple del Sitio:

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:

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:

Y le damos a Guardar.

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

Y, en la pestaña inferior del documento ya aparece el nuevo nombre (index)que le hemos dado al archivo: .

A poner algo en el documento. (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:

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:

El asterisco habrá desaparecido:

Ahora vamos a poner un color de fondo a la página. Para ello clikeamos 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:

Aparecerá la siguiente ventana:

De todo lo que se puede hacer aquí, de momento nos quedamos con poner un color de fondo. Clikea 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:

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.
Aquí hacemos una simulación: F12 .
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

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. Uno de ellos es terra .(primero tienes que solicitar una cuenta de correo, después activar el espacio para la página).
Nota: Desde hace un tiempo TERRA ya no ofrece la posibilidad de alojar páginas web de forma gratuita a los nuevos usuarios. Es una pena pues era uno de los pocos servidores que te permitían (como este sitio) la visualización de las páginas sin publicidad. Otro de ellos es YAHOO a través d e GeoCities . También primero debes crearte una cuenta de correo con YAHOO y, después, puedes acceder al sitio para tu página. O LYCOS . (Cuando publiqué la continuación de este tutorial de iniciación ya no pude hacerlo con TERRA y me decidí por este servidor: La publicidad es bastante discreta).
A partir del 1/1/2003 el tutorial de MX Intermedio está alojado en un nuevo servidor: Jazztel . Al contratar una conexión de banda ancha, te proporcionan espacio para alojamiento de webs: Sin publicidad.
Puedes conseguir 5 megas gratis que da CANTV.net por tener un freemail y luego activar la cuenta en mipagina.cantv.net , libre de publicidad.

•  ¿Cuál es la dirección URL?

Este ordenador servidor nos tiene que proporcionar unas claves para la trasferencia de los ficheros y la dirección en la cual se encontrará nuestra página inicial.
8.3.- Un programa de transferencia de ficheros . Un programa de FTP.
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). Uno de ellos, que funciona bien, es bastante intuitivo y se puede conseguir de forma gratuita es el WS_FTP . (Haz clic en el enlace para descargar el programa).

Ahora podemos salirnos del programa, meternos en internet y teclear nuestra dirección para comprobar que la página se visualiza correctamente:

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 S itio > Editar sitios...

Se nos abrirá la siguiente ventana:

Pulsamos el botón y pasaremos a:
Nota : Clikea la pestaña en el caso de que no se abra por defecto

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í:

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

Le damos a y ya está.
Ahora procedemos a conectar telefónicamente con el servidor. Para ello clikeamos 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.
( Nota : Estamos haciendo la transferencia como si no lo hubiésemos hecho con el programa WS_FTP del documento anterior. Por eso, aparece la carpeta pero no hay ningún archivo dentro de ella).
Cambia mos a Vista local en el menú de opción:

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:

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:
 

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:

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 d e 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 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:

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:

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:
Hemos seleccionado por el método de arrastrar el cursor las celdas anteriores para cambiar el color de fondo:

El resultado es:


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:

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.
Clikeamos en Insertar de la barra de menús y soltamos en Imagen:

Aparecerá la ventana Seleccionar origen de imagen:

Clikeamos en Escritorio y seleccionamos la imagen: obras

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

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:

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

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 clikeamos en de

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:

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.

.