Sección Informática

Vinculos

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

Clikeamos en el icono de y se abrirá:

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 pu ede modificar:

Cuando probemos con el navegador comprobaremos que al clikear 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:

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 (anchor)

Es cuando queremos que al clikear 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 cur sor delante del título del documento (delante de Vínculos) y clikeamos 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:

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


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

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

Éste es el resultado:
Escríbeme
Cuando un visitante de nuestra página clickee 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.

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 clikea 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 c orreo electrónico: Selecciono la palabra Escríbeme y, una vez seleccionada, clickeo 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 &iacute;) 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 clickeo 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 clikeando 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.
Pues bien, puedo colocar las etiquetas de enlace de correo anteriores: <a href="mailto:apuente@roble.cnice.mecd.es"> delante y </a> detrás:

Dándole a Archivo > Guardar cuando hayas acabado y volviendo a la vista normal (Vista diseño) clikeando 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:

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.

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:
El deporte de aventura.
La música rock
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.

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 &nbsp; no break space. Podemos poner tantos como haga falta para conseguir nuestros objetivos:
aaaa
 aaaa
  aaaa
   aaaa
    aaaa
     aaaa
      aaaa
       aaaa
        aaaa
Este es el código que, esta vez, hemos escrito directamente:


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.

Empiezo creando un nuevo arc hivo: Archivo > Nuevo archivo

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

Hago doble clic sobre él para abrirlo:

Pulsamos para que se despliegue:

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

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

Procedemos a Guardar: Archivo > Guardar todo:

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

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.

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:

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:

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:


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 clikea 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 clikea en para ver el código fuente generado:

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:


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

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

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

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:

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: Archi vo > Guardar todo
Le damos a F12 para comprobar con el navegador que las cosas funcionan.  

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: Clikeamos 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 clikeamos 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).

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

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íne a
El segundo botón, por ejemplo, debería quedar así:

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:


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


-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 visi tante. 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:

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:

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:

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:apuente@roble.pntic.mec.es
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:

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.
Pues bien, este curso de iniciación a Dreamweaver MX se da por acabado.