Tanaceto y la Información

Siempre es preferible un final catastrófico a una catastrofe sin fin.

Hacer una página básica HTML con Dreamweaver CS3 (II): Los Marcos

Posted by tanaceto en octubre 9, 2007

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.

ff.png

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

h.png

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

kjh.png

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.

fgj.png

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.

10 comentarios to “Hacer una página básica HTML con Dreamweaver CS3 (II): Los Marcos”

  1. Prod-Clod said

    Hola! Mira, yo hice una portada con Fireworks CS3, con los botones que siles pasas el cursor encima se iluminan; la convertí en HTML y bueno, como no sabía de esas cosas tuve que investugar, hasta que aprendía en dón y qué links poner para que las imágenes aparecieran cuando yo colocara el código HTML en mi grupo msn… Pero el problema está en que por más que no sé cómo hacer para que se pueda dar el efecto MouseOver en mis botones! En la vista previa sale bien, además yo pongo los links de las imágenes subidas en donde el archivo HTML cargado con Dreamweaver CS3 lo pide! Por favor, en internet no encuentro nada de lo que necesito, te agradecería muchísimo si me mandas un correo a mi casilla de e-mail diciendome lo que tengo que hacer. Mi correo es: ff_7_8_9@hotmail.com. Si querés te paso el archivo HTML para que lo veas y me diga en qué parte me estoy equivocando o qué me está haciendo falta, te paso el queyo modifiqué y el que está default… GRACIAS de antemano!

  2. tanaceto said

    Me temo que no te puedo ayudar. Yo uso el Flash para hacer ese tipo de cosas, y solo tengo que cargarlo y listo. Siento no poder ser de ayuda.

  3. mkinacion said

    Hola! Mira, yo hice una portada con Fireworks CS3, con los botones que siles pasas el cursor encima se iluminan; la convertí en HTML y bueno, como no sabía de esas cosas tuve que investugar, hasta que aprendía en dón y qué links poner para que las imágenes aparecieran cuando yo colocara el código HTML en mi grupo msn… Pero el problema está en que por más que no sé cómo hacer para que se pueda dar el efecto MouseOver en mis botones! En la vista previa sale bien, además yo pongo los links de las imágenes subidas en donde el archivo HTML cargado con Dreamweaver CS3 lo pide! Por favor, en internet no encuentro nada de lo que necesito, te agradecería muchísimo si me mandas un correo a mi casilla de e-mail diciendome lo que tengo que hacer. Mi correo es: ff_7_8_9@hotmail.com. Si querés te paso el archivo HTML para que lo veas y me diga en qué parte me estoy equivocando o qué me está haciendo falta, te paso el queyo modifiqué y el que está default… GRACIAS de antemano!

    proba con el dreamweaver 8…yo lo use toda la vida…ahora con el cs3 tube un monton de problemas de ese tipo… guarda el archivo (html) y abrilo con el Drem8!

  4. Pablo said

    Me pillas un poco perdido en el tema. De todas formas yo lo que haría sería crear una tabla en una página nueva e introducir importando el archivo de fireworks. Creo que así debería mantener las propiedades que hubieras introducido desde el fireworks. Mi problema es que no he usado el fireworks nunca, por lo que no estoy familiarizado con lo que me cuentas. Si quiero hacer esos efectos del mouse lo hago directamente en el dream, añadiendo comportamientos. De todas formas me extraña que en el propio manual del dreamweaver de la página de adobe no te venga cómo hacer eso. Si no lo has mirado échale un ojo.

    Perdona esta ayuda tan poco útil. Ando liado últimamente y no voy a poder meterme en el dreamweaver a ver cómo se hace lo que dices, pero si tienes paciencia en un mes espero disponer de más tiempo y quizás poder echarte un cable entonces, aunque seguro que para entonces habrás encontrado la manera. No obstante consultaré a un amigo a ver que me cuenta.

    Lo de probar con distintas versiones lo veo un poco lío. Yo procuro tener siempre la última actualización o versión del programa, y el CS3 está genial. Si te da errores rehaz desde el CS3 el archivo original hecho con la versión 8.

    Suerte

  5. guillermo said

    Gracias!! la verdad que esta muy claro y funciona!! Una parte de mi web va a tener vida gracias a ti. Sigue asi.

  6. ale said

    hola como puedo hacer bien una pagina web y los codigos

  7. pablo said

    con paciencia querido Ale, con paciencia, jeje.

  8. tanaceto said

    jeje… contempla el agua que fluye y solo entonces sabrás que estas preparado…

  9. aaaaaaaara said

    naada

  10. Diego said

    Necesito ayuda para saber el porque cuando creo mis frames estos no solo aparecen en la pagina que los cree sino en todas las paginas enlazadas Espero por favor me indiquen por favor como hacer esto adecuadamente.

    gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: