Esta es la segunda parte del post «Como hacer una página básica HTML con Dreamweaver (I)«.
Anteriormente hemos realizado una sencilla página html (index.html) con tres tablas (donde hemos añadido texto html y alguna imagen) y un enlace (link).
Vamos a seguir profundizando un poco en el Dreamweaver. Para ello introduciremos un nuevo elemento con mucho juego: los «marcos».
– Los Marcos (frames):
Cuando hacemos una página html, ésta ocupa todo el espacio del navegador, pero a través de los marcos podemos hacer que una página principal sea el enlace a dos páginas html con un tamaño concreto donde se pueden visualizar independientemente y que veamos las dos páginas en una sola ventana.
Podemos hacer múltiples marcos, pero por ahora solo vamos a dividir una página en dos, con el fin de poder hacer una página donde pondremos un menú superior fijo y una página inferior que irá cambiando en función de los enlaces que presionemos (situados en la página fija superior). Veamos como se hace:
1. Abrimos el Dreamweaver y creamos una página nueva (HTML).
2. Vamos a Insertar/HTML/Marcos (Insert/HTML/Frames) y seleccionamos el «Top». Se abrirá una pequeña ventana donde tendremos que especificar el nombre del nuevo marco (frame). Es importante poner bien el nombre para luego situarnos sin problemas sobre la página correspondiente. En este caso le pondré el nombre «top frame» a mi página superior. Verás que aparece una línea gruesa gris que divide la página en dos. Cuando presionas sobre la superior te sitúas en ella, y lo mismo con la inferior.
* Aquí quisiera especificar dos detalles:
– Cuando creamos un «marco», las páginas resultantes de tal división quedan separadas por una línea gruesa que podemos mover con el ratón (cambiando de tamaño las páginas). Pero cuando abrimos ese archivo previamente guardado, esa línea desaparece. Deberemos activarla (para poder mover esa línea a nuestro antojo) en View/Visual Aids/Frame (perdón, pero no tengo la versión en español).
– Solo tenemos que presionar con el ratón sobre la página que queramos modificar, pero, ¿cómo activar la página index.html que nos permitirá abrir las dos nuevas páginas creadas con nuestro marco?. Bien, para ello deberemos ir a Ventanas/Marcos (Windows/Frame). A nuestra derecha se abrirá una ventana donde se puede ver la página que hemos creado. Si presionamos sobre cada una de las dos páginas accedemos a ellas, y si presionamos la línea que los une (en gris claro), se marcarán las dos y veremos que tenemos el index.html marcado. Esto es muy útil cuando queramos, por ejemplo, introducir los mega-tags, pero eso será otro post.
2. Lo segundo que hacemos es acceder a las propiedades de página de cada una de las dos que hemos creado, e introducir los valores que nos parezcan más oportunos.
3. Ahora deberemos guardar el proyecto. Yo, por sistema, creo una carpeta nueva donde voy introducir mis archivos html de la web. En este caso, llamaremos a la carpeta «Web». Una vez creada me voy al Dreamweaver y le doy a «guardar todo», en Archivo/Guardar Tod (Archive/Save All). Como no hemos guardado el proyecto hasta ahora, nos saldrá una ventana para asignar un nombre a cada una de las tres páginas de las que disponemos (hemos hecho un marco que divide la página en dos, por lo que tenemos dos páginas (una superior y otra inferior) y una página principal que nos sirve para visualizar las otras dos en una sola ventana, y que será la que usemos para leer nuestra página (como siempre, se deberá llamar index.html, para que los servidores la reconozcan). También deberá ir en la propia carpeta «web».
Para darnos cuenta de qué página estamos guardando, tendremos que mirar el cuadrado que señala qué página estamos guardando. La primera es la principal, que abarca las dos páginas. A esta la llamaremos «index.html». A la segunda, que es la inferior, la denominaremos «cuerpo.html». A la tercera (la superior) la llamaremos «cabeza.html». Recuerda que deberas darle un título a cada página en vez del «untitled document».
4. Hemos dicho que queremos crear un menú superior con una serie de categorías que una vez sean presionadas con el ratón, abrirán una página con la información que queramos, pero no en «cabeza.html», sino en «cuerpo.html».
Nuestras categorías, para este ejemplo, serán 2: «contacto» y «enlaces». Nos situamos en «cabeza.html» y creamos una tabla con dos columnas y una sola fila. En su interior escribimos en texto las dos categorías. En «cuerpo.html» creamos una tabla con un mensaje de bienvenida a nuestra web.
5. El siguiente paso es crear una página nueva para el contenido de «contacto» y otra para el contenido de «enlaces». Introduciremos una simple tabla con una columna y una fila y dentro escribiremos los datos que queramos meter. Las guardaremos como «contacto.html» y «enlaces.html», en una carpeta llamada «html» que hemos creado previamente dentro de la carpeta «Web». Podría grabarlas directamente en la carpeta web, pero a la larga, a medida que la página tiene más elementos, se vuelve un lío, así que es mejor subdividir en carpetas desde un principio. El modelo es el que consideres más oportuno, siempre que respetes a «index.html» como la principal e introduzcas y añadas los archivos de la web dentro de la carpeta principal. Los enlaces de «enlaces.html» recuerda ponerlos con un target blank, puesto que son páginas ajenas a la tuya y es mejor que abra una ventana nueva para que no se vaya el usuario de nuestra página.
5. Volvemos «cabeza.html», y seleccionamos cada categoría añadiéndole un enlace (con la barra de tareas claro) con la ubicación de su archivo correspondiente, es decir, cuando hacemos un link nos deja una opción de buscar un archivo del ordenador, y elegimos para contacto el archivo «contacto.html». En destino (target) veremos que además de los clásicos blank, self, etc, hay ahora main frame y top frame. Son nuestras dos queridas páginas creadas con el marco. Marcamos «main frame» en las dos, para que el enlace se abra en el hueco de cuerpo.html, y no en cabeza.html.
6. Lo único que nos queda es «guardar todo» (aquí, como ya hemos grabado una vez, nos guardará todo donde estaba previamente). Abres la página con algún navegador (en Archivo/Previa) y compruebas que todo esté bien.
Tanaceto y la Información 
