crear un archivo nuevo html.doc

Centro de Estudios Científicos y tecnológicos No. 5 “Benito Juárez”

Prácticas de Desarrollo Web

PRACTICA 1

Nombre del alumno ____________________________________grupo____________

Crear un archivo nuevo HTML

Abrir el programa.

Una vez instalado, lo encontramos en la ruta (Windows XP) Inicio > Todos los programas > Macromedia > Macromedia Dreamweaver MX 2004

Nótese que es compatible la instalación del nuevo Dreamweaver MX 2004 con el anterior DreamweaverMX.,Al abrirlo por vez primera aparece este mensaje de configuración del espacio de trabajo. Elegimos Diseñador.

EJRV 1


Prácticas de Desarrollo WebAparecerá la siguiente interfaz:

Antes de continuar, es importante que te familiarices con las columnas y fragmentos de filas que se hacen visibles o no, damos un clic en los correspondientes iconos. Para ocultar la columna de la

derecha se le da al icono . Para recuperar su vista se le da a

Tanto en la columna derecha, más estrecha, como en la izquierda, más ancha, hay fragmentos de filas que se muestran o se ocultan pinchando en el nombre. Por ejemplo podemos ocultar el panel

de Propiedades pinchando en . Para volverlo a recuperar, damos un clic en

EJRV 2

http://olmo.cnice.mecd.es/~sjimen1/paginas/01.htm#%23





Prácticas de Desarrollo WebPero este tablón de mandos no siempre va a estar visible. El mejor método es hacerlo por medio de Archivo > Nuevo...

Aparecerá este nuevo cuadro de diálogo. Elegimos Página básica y HTML y pulsamos en el botón Crear

Y llegaremos al mismo sitio ya explicado, un Untitled-1 listo para convertirse en nuestra primera página.

EJRV 3



EJRV

Procedemos, a continuación, a su guardado. Le damos a Archivo > Guardar

Dreamweaver procederá a guardar el documento en la carpeta raíz del sitio

Realizar un documento, formato de pagina y cambiar el fondo de la pagina.

Simplemente empezamos a escribir en el espacio vacío.Le damos un "enter" para saltar de línea.

EJRV 4



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

Si este panel está oculto es porque está en esta posición:

Observa la cabeza de flecha apuntando hacia la derecha. Haciendo un clic, la cabeza de flecha apuntará hacia abajo y el panel se desplegará como en la situación anterior.

Para efectuar los cambios que necesitemos, tendremos que seleccionar previamente el texto que queramos modificar:

EJRV 5



He seleccionado la primera palabra. Le he aplicado un Encabezado 1, lo he centrado, no he cambiado el tipo de fuente, ni el tamaño (ya lo hace al ser encabezado de orden 1) y he elegido el color rojo. En estos momentos, Dreamweaver le ha puesto un nombre a esta selección de formatos: Estilo 1

Modifico ahora la segunda frase

EJRV 6



Ahora he puesto en negrita, centrado, he cambiado el tipo de fuente, he puesto como tamaño grande y he elegido ese color. Dreamweaver le ha puesto como nombre Estilo 2.

Observa que, mientras hacemos algún cambio y no guardamos, aparece un asterisco en la pestaña que nos indica el documento que tenemos abierto:

Lo guardamos con Archivo > Guardar

Y el asterisco desaparece:

EJRV 7



Conviene guardar cada cierto tiempo por lo que pueda pasar...

Vamos ahora a poner un color de fondo. Damos un clic en el botón Propiedades de la página... del Inspector de propiedades y se abre el cuadro de diálogo:

Damos un clic en Color de fondo y elegimos uno:

Se habrá colocado en su sitio:

EJRV 8



Le damos a Aceptar:

Guardamos y cargamos en el navegador con la tecla F12:

EJRV 9



Ahora he puesto en negrita, centrado, he cambiado el tipo de fuente, he puesto como tamaño grande y he elegido ese color. Dreamweaver le ha puesto como nombre Estilo 2.

Observa que, mientras hacemos algún cambio y no guardamos, aparece un asterisco en la pestaña que nos indica el documento que tenemos abierto:

Lo guardamos con A rchivo > Guardar

Y el asterisco desaparece:

Conviene guardar cada cierto tiempo por lo que pueda pasar...

Lo cargo en otro navegador. Esta vez el Mozilla:

EJRV 10



Comprobar sin F12

Lo he dado por supuesto en los párrafos anteriores al decir "cargar la página con otro navegador". A veces puede ocurrir también que la tecla F12 no funciona. En este caso, vamos con el Explorador de Windows a la carpeta donde está guardado el documento, en mi caso, en la carpeta mi_primer_sitio dentro del disco duro D:

EJRV 11



Hacemos doble clic en la carpeta para abrirla:

EJRV 12



El icono que acompaña al archivo es el del FireFox (mi navegador predeterminado). Haciendo doble clic sobre el icono se abrirá el documento.

Si lo queremos abrir con otro navegador, una posibilidad es pinchar con el botón derecho del ratón y elegir Abrir con...

O bien, abrir el navegador y buscar el archivo. Por ejemplo, abro el Mozilla y le doy a Abrir archivo...:

EJRV 13



Y me muevo por los dicos y carpetas hasta encontrar el archivo que quiero abrir:

EJRV 14



PRACTICA 2

Nombre del alumno ____________________________grupo___________

Manejo de tablas (Insertar y modificar )

Las tablas son muy importantes para el diseño de una página web. Muchos de los temas de empleando tablas. La tabla se puede definir con un borde cero con lo que, podremos ocultarla, si no nos gusta presentar los contenidos encorsetados dentro de los límites de las celdas. Pero, insisto, nos habrá servido para colocar los elementos en los puntos, más o menos, deseados.

Para insertar una tabla, le damos a Insertar > Tabla

Aparecerá un cuadro de diálogo como éste:

EJRV 15



Podemos definir, de entrada, el número de filas y columnas, el ancho que ocupará en % o en píxeles, el grosor del borde, el relleno de celda o el espacio en píxeles que hay desde el borde de la celda al comienzo de los datos, sea escritura o imagen. El espacio entre celdas es lo que indica el nombre, definido en píxeles también. Los encabezados son un preformateado de las celdas elegidas para escribir con caracteres enfatizados y centrados. El resto, no lo consideramos de momento.

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 y sin encabezado:

Modificar la tabla

Si colocamos el cursor en una de las celdas, el Inspector de Propiedades tendrá un aspecto similar a éste:

Lo que hay por encima justo del panel del Inspector de Propiedades son las etiquetas del lenguaje HTML que veremos más adelante. De momento, indicar que la etiqueta <body> (de body, cuerpo) hace referencia a todo el documento que se visualiza con el navegador.

La etiqueta <div> (de division, división) hace referencia a una división o un espacio acotado en el que se pueden situar determinados elementos. La etiqueta <table> (de table, tabla) hace referencia a la tabla entera, la etiqueta <tr> (de table row, fila de la tabla) a la fila en la que está el cursor y la etiqueta <td> (de table data, o datos de la tabla) a la celda.

Observa que la última etiqueta está marcada. Eso quiere decir que es la celda la que está seleccionada y todo lo que ponga en el Inspector de Propiedades será con referencia a esa celda.

Si queremos centrar la tabla, la seleccionamos pinchando con el cursor en cualquier punto interno y

presionando la etiqueta <table> . La tabla quedará marcada con un borde de color negro con unos cuadraditos (tiradores) en los puntos medios de los lados lateral derecho e inferior:

EJRV 16



Una vez seleccionada, observa que el Inspector de Propiedades está relacionado con la tabla. Allí selecciona Alinear > Centro

La tabla quedará alineada al centro:

Lunes Martes Miércoles Jueves Viernes

Mañana

Tarde

Vamos a observar el resto de valores del panel del Inspector de Propiedades:

En Id de tabla podremos poner un nombre a la tabla. Posteriormente, cuando la seleccionemos, DW la llamará con su nombre en la etiqueta. Aunque no es un tema importante, vamos a hacer una prueba. Si la llamo uno, por ejemplo, observa la etiqueta que aparece por encima del panel:

EJRV 17



Puedo cambiar el número de filas y el de columnas. Establecer un ancho y un alto diferentes (en % o en píxeles). Cambiar los rellenos de celda y los espacios entre celdas, alinear diferente, cambiar el borde. En la parte inferior, dejamos los iconos de la izquierda de momento y observamos el Color de Fondo, el Color del borde y la imagen que puedo colocar como fondo de la tabla.

Vamos a hacer algún cambio en la tabla:

Hemos añadido una fila, 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:

Observa el aspecto del panel Inspector de Propiedades:

EJRV 18



Si, por ejemplo, pulsamos en y en el texto escrito en la fila se colocará centrado en cada celda y en negrita:


Mañana

Tarde

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


Mañana

Tarde

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

EJRV 19



Éste es el resultado:


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

Tarde Aula 1 Aula 3 Aula 1 Aula 2 Aula 1

Noche Tiempo libre Fiesta final

Para hacer que el ancho de cada columna permanezca fijo y uniforme, primero pienso cuánto puede ser el % . Por ejemplo, 10% para la primera columna y 15% para las otras seis (tienen que sumar el 100% de la tabla, aunque ésta sea el 80% de la pantalla).Pongo el cursor dentro de la primera celda y, en la casilla An escribo 10% (todo seguido sin espacio). Paso a la segunda celda y escribo 15% y asi hasta el final...

Resultado:



EJRV 20


Prácticas de Desarrollo WebTarde Aula 1 Aula 3 Aula 1 Aula 2 Aula 1


EJRV 21



PRACTICA 3


Imágenes

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

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: damos un clic sobre la carpeta raíz en el panel lateral derecho con el botón derecho del ratón y, en el menú conextual, elegimos Nueva carpeta

Aparecerá una nueva carpeta. DW le habrá puesto como nombre untitled

Nosotros le cambiamos el nombre:

EJRV 22



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

Damos un clic en Insertar de la barra de menús y soltamos en Imagen :

Se abre la ventana del explorador para que localizemos la imagen que queremos insertar:

Le damos a Aceptar. Como la imagen está fuera de la carpeta raíz del sitio, aparece este mensaje de advertencia:

EJRV 23



Le decimos que sí y se nos abre la carpeta raíz del sitio:

Hacemos doble clic sobre la carpeta imagenes:

Y le damos a Guardar. La imagen se habrá colocado en el documento y en la barra lateral derecha, en archivos, podremos ver la imagen dentro de la carpeta imágenes.

EJRV 24



Observa la imagen colocada en el documento. Como está seleccionada, el panel del Inspector de Propiedades estará referido a la imagen:

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 vamos a poner un fondo en la primera celda de la primera fila (vamos a hacerlo desde este propio documento). Insertamos la tabla y situamos el cursor en la primera celda:

EJRV 25







Y, en el panel del Inspector de Propiedades, nos fijamos en

Una forma de hacerlo es dando un clic en y, sin soltar el ratón, arrastar hasta pillar la imagen que queremos colocar (en este caso se llama fondo01.gif) en el panel de archivos de la derecha:

La imagen se habrá colocado como fondo de esa celda:





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 panel del Inspector de Propiedades, una información sobre el tamaño.

EJRV 26



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í observamos que nuestro fondo, el fondo01.gif ocupa 3 KB que es un tamaño adecuado. Observa, también, los dos formatos de imagen que aparecen aquí el .gif y el .png Los dos son muy similares, se emplean para imágnes con colores planos. El tercer formato de la web, el .jpg se emplea para imágenes con muchos matices de color.

El formato .ico es un formato de iconos. Lo que ves allí es un favicon o una pequeña imagen a modo de logotipo que se sitúa delante de la dirección URL de la página y en los listados de los favoritos.

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 )

EJRV 27



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.

EJRV 28

http://ausmall.com.au/freegraf/freegrfa.htm


Prácticas de Desarrollo WebPRACTICA 4

Nombre del alumno ____________________________grupo__________

Vínculos

Los vínculos , hipervínculos , enlaces , hiperenlaces, links (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, damos un clic en el icono de la sección Vínculo dentro del panel del Inspector de Propiedades y elegimos el archivo vinculado. 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 manual de Dreamweaver. Seleccionamos la frase

Y vamos al Inspector de Propiedades (si no está abierto, lo abrimos pinchando en

) y , tenemos dos opciones. Por una vez vamos a ver dos formas diferentes de hacer las cosas.

La primera es pinchar en el icono del apartado

y arrastar sin soltar hasta pillar el archivo al que queremos que apunte el vínculo. Si la columna derecha no está visible, hazla visible antes

pinchando en el icono

La segunda es pinchar en el icono carpeta que está al lado. Se abrirá la carpeta con nuestros archivos, seleccionamos el adecuado y aceptamos.

EJRV 29

http://olmo.cnice.mecd.es/manual_dwmx_04/paginas/05.htm



La palabra o frase activadora del vínculo quedará marcada de otro color (normalmente azul y subrayada, pero esto se puede modificar como ocurre en este documento). Para comprobar el funcionamiento, guardaremos los cambios, le daremos al F12 y veremos que al pinchar sobre la frase nos vamos al otro documento.

Vínculos a documentos externos

Son los vínculos que nos llevan a otros documentos que no son de nuestro sitio. Se comienza igual: seleccionando la palabra, frase, imagen,... que será la activadora del vínculo. En este caso vamos a partir de una imagen:

Supongamos que queremos hacer que este logo de Google nos lleve a la página principal del famoso buscador. Seleccionamos primero la imagen: se colocará un borde de color negro con tiradores en los laterales derecho e inferior:

y en Vínculo del Inspector de Propiedades escribimos la dirección URL de destino:

EJRV 30

http://olmo.cnice.mecd.es/~sjimen1/paginas/06.htm#inicio%23inicio

http://www.google.es/



En los vínculos externos es norma de estilo casi obligada que los vínculos se carguen en ventana nueva del navegador. Esto favorece mucho la navegación. Para hacerlo, elegimos en Destino la

opción _blank Nuestra imagen vinculada tiene estos tres

parámetros:

Un nuevo parámetro de bastante importancia es colocar un texto alternativo para la imagen. Útil tanto en imágenes activadoras de vínculos como en imágenes normales. Si el visitante opta por no cargarse las imágenes (por rapidez en la carga, por ejemplo) se encontrará con un texto alternativo.

Esto se hace en (con la imagen seleccionada, claro):

Vínculos a otros puntos del mismo documento

En este mismo sitio tienes abundantes ejemplos de este tipo de vínculos.

Desde un menú tipo índice, accedemos a cada uno de los apartados de ese índice. Y todos los apartados forman parte del mismo documento. Para hacer esto posible, primero hay que definir las anclas o puntos de destino de los vínculos. Dreamweaver lo llama Anclaje con nombre. Situamos el cursor en el punto en el que queramos situar el ancla y le damos a Insertar > Anclaje con nombre

Aparecerá este cuadro de diálogo:

EJRV 31



Tenemos que ponerle un nombre siguiendo las mismas reglas que en los nombres de archivos y carpetas: no acentos, no espacios, no caracteres especiales, mejor minúsculas, mejor nombres cortos y comenzando por letra.

En el sitio donde hemos colocado el ancla aparece este icono de color amarillo (invisible en modo navegación):


Si pincho sobre el icono del ancla, en el Inspector de Propiedades observo todos los parámetros del mismo:

Una vez fijado el anclaje, para establecer el vínculo procedemos, primero, como en los casos anteriores, seleccionando la palabra o frase que activará el vínculo

Y, a continuación en el panel del Inspector de Propiedades escribimos el vínculo con el carácter almohadilla delante:

EJRV 32



Y ya estará.

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

Los dos tipos anteriores de vínculos se pueden unir. Es decir, podemos hacer vínculos a puntos concretos de otros documentos de nuestro sitio. Para ello, lógicamente, tendremos que haber definido previamente el anclaje. Una vez hecho esto, primero se define el vínculo al documento y, posteriormente, se prolonga la dirección vinculada con la coletilla #ancla

Veamos un ejemplo: supongamos que queramos ir al apartado 08.4.2.- que se encuentra en el documento 03.htm Primero vinculamos con el documento

Y, después, añadimos el nombre del ancla precedido de #

Comprobar que funciona:

EJRV 33


Prácticas de Desarrollo WebVí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.

Primera posibilidad: La dirección de correo es visible en el documento.Le damos a Insertar > Vínculo de correo

Y, en el siguiente cuadro de diálogo escribimos el texto y la dirección de correo coincidentes:

Resultado:

[email protected]

Segunda posibilidad: El texto activador del vínculo es diferente.Se comienza igual pero se escribe:

Resultado:

EJRV 34

mailto:[email protected]


Prácticas de Desarrollo WebEscríbeme

Tercera posibilidad: A partir de una imagen.Insertamos la imagen, la seleccionamos y, en el Inspector de Propiedades escribimos mailto:direcciondecorreo

Resultado:

Cuarta posibilidad: Indicar la dirección sin activar el vínculoDebido a los abusos de la recopilación de firmas por medio de robots que recorren las páginas de internet para el envío de spams indiscriminados, es lo que se hace últimamente, indicar la dirección de correo pero no vincularlo y, tampoco, mostrar la arroba, pues es el criterio de actuación de los robots. "Pillar las cadenas de texto en la que haya una arroba". Esto se puede hacer tanto a nivel superficial, del body mostrado en pantalla, como a nivel de código fuente. Por eso, la ternera posibilidad, la de la imagen vinculada, no protege contra el copiado pues, a nivel código fuente.

EJRV 35





PRACTICA 5


Una vista al código fuente

Ya al principio del Manual, hemos dicho que había que saber un poco sobre código html para aprender a manejar con soltura un editor como Dreamweaver.Si no tienes mucha idea de a qué nos estamos refiriendo presiona aquí: código html . Si ya sabes, aunque sólo sea un poco, de lenguaje html, continúa leyendo. Una de las potencialidades de este editor es que podemos pasar al código fuente sin ningún

problema pinchando en el icono

Pero es que, además, si selecciono en la vista Diseño un determinado elemento, al pinchar en la vista Código aparecerá el código, correspondiente a ese elemento, también seleccionado. Lo cual es muy de agradecer pues, a veces, es muy difícil la localización entre todo el código de un determinado fragmento.

Por ejemplo, si señalo la última imagen que he puesto en este documento, la imagen de la vista Diseño y voy al código fuente, aparecerá seleccionado todo el código correspondiente a la inclusión de esta imagen.

La etiqueta está diciendo que la imagen se llama 142.png que se encuentra en la carpeta imag y que hay que salir de la carpeta en la que está el archivo de la página para pillarla (eso quieren decir los dos puntos). Es decir, que la carpeta en la que se encuentra el documento éste y la carpeta imag se encuentran en el mismo nivel. Mira la estructura:

EJRV 36



Veamos una ruta de una imagen colocada en el index.htm Aquí no habrá los dos puntos pues la página está "por encima"

Las letras src vienen de source, fuente en inglés. Aquí nos encontramos también el texto alternativo a la imagen alt. Es el texto que se mostrará cuando el visitante visite nuestra página sin que se carguen las imágenes (una opción de navegación que permite mayor rapidez en las descargas). También, pero sólo en el Explorer, ese texto aparecerá cuando aproximemos el cursor a la imagen. Observa, por otro lado, el tema de la tilde. Yo he colocado el texto en la vista Diseño en el

Inspector de Propiedades... y he colocado la tilde correspondiente: Dreamweaver ha transformado la tilde (carácter especial) en un código legible por todos los navegadores: ó Finalmente aparece la anchura y la altura de la imagen.

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 > HTML > Caracteres especiales > Salto de línea

EJRV 37



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

El párrafo se ha encerrado entre las etiquetas <p> de apertura y </p> de cierre.

Veamos ahora el código que se genera cuando insertamos un salto de línea (lo inserto):

Observa que el párrafo no se ha cerrado. En vez de cerrarse se ha escrito la etiqueta <br> de break, romper. Como este salto de línea se emplea muchísimo y está ciertamente bastante escondido, es más fácil aprenderse el atajo del teclado: se trata de pulsar el intro pero con la tecla de la flecha de las mayúsculas pulsada.

Listas de cosas

Cuando queremos realizar una enumeración de objetos, lo hacemos pulsando la tecla del panel de

propiedades (una vez que nos hayamos situado en el primer objeto de la lista).

Estas son mis aficiones:

El cine

La lectura

EJRV 38


Prácticas de Desarrollo Web Los paseos por el campo

Para acabar la enumeración volvemos 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, lista ordenada. El resto, es lo mismo que en el caso anterior.

Sangría del 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 el botón (Sangría de texto) que permitirá que el texto se sitúe sangrado desde el margen izquierdo. Puedo pulsarlo varias veces. Hacemos una prueba pulsándolo

cuatro veces. Para deshacer la accíon pulsaré el botón (Anular sangría de texto)

He pulsado 4 veces el botón Sangría de texto. Y pulso intro:

Ahora el margen se guarda. Pulso intro:

Para volver al margen inicial pulsaré la tecla Anular sangría. Pulso intro

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

Veamos el código generado:

EJRV 39



Aparte de la etiqueta del sangrado <blockquote>, comentar la etiqueta <strong> equivalente a la etiqueta <b> bold para poner el texto en negrita.

Hay otra forma de sangrar el texto o de colocar más de un espacio entre dos palabras. Es con Insertar espacio indivisible no breaking space con la secuencia Si lo hacemos desde la vista Diseño se hace con Insertar > HTML > Caracteres especiales > Espacio indivisible

Como veis hay un atajo que conviene aprenderse pues esta secuencia se utiliza mucho. Es la combinación de teclas Ctrl + Mayúsculas + Espacio

Hacemos una prueba Hacemos una prueba

EJRV 40


Prácticas de Desarrollo Web Hacemos una prueba Hacemos una prueba Hacemos una prueba

Vista del código:

En realidad, aunque el no breaking space se ideó para que dos palabras separadas no puedan nunca verse cortadas en dos líneas diferentes, la utilidad mayor, es la que acabamos de ver. Otra utilidad es el relleno de celdas de una tabla, por ejemplo, para mostrar la celda vacía pero con sus paredes y espacio interior perfectamente definido. Por ejemplo, en esta tabla:

relleno

Según la versión del navegador que emplees, la celda primera y la segunda puede que las veas diferentes. Mira el código:

En la primera celda hay un y en la segunda no hemos puesto nada. En el navegador ambos están vacías...

EJRV 41



PRACTICA 6

Nombre del alumno ____________________________grupo__________

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 ver el funcionamiento de este marco pulsa aquí .

EJRV 42


Prácticas de Desarrollo WebPara 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 una estructura de marcos dentro de este sitio y en una carpeta a la que llamo marcos... podría hacerlo como un sitio absolutamente independiente. En ese caso la carpeta marcos sería la carpeta raíz. Creamos la carpeta pinchando con el botón derecho del ratón sobre la carpeta raíz:

Y le ponemos como nombre marcos

Le damos a Archivo > Nuevo...

Y elegimos Conjunto de marcos y el último modelo que es el que vamos a hacer:

EJRV 43



Aparecerá creado en el espacio principal de la interfaz. Observa el nombre que le ha puesto DW UntitledFrameset (conjunto de marcos sin título)

EJRV 44



Podría ser conveniente escribir algo en cada uno de los documentos que forman el conjunto de marcos. No olvides que estamos hablando de cuatro documentos, cuatro archivos, en tres espacios:

La estructura de marcos o el conjunto que es un documento especial que distribuye los

espacios. El frameset o el conjunto de marcos.

El documento titulo que es la banda horizontal superior.

El indice que es la banda vertical izquierda.

El espacio principal que es el destinado a alojar el contenido de cada documento cargado.

EJRV 45



Ahora le damos a Archivo > Guardar todo

Y empezaremos a guardar cada uno de esos documentos. Empezamos:

EJRV 46



Observa que el cordón está recorriendo todo el espacio y que DW le ha puesto como nombre provisional UntitledFrameset. Eso quiere decir que estamos guardando la estructura, el conjunto de todos los marcos. Pero antes, hacemos doble clic en la carpeta marcos que es donde quiero guardar todos los archivos de los marcos:

EJRV 47



Le podemos poner como nombre conjunto.htm (si fuese lo primero que tuviese que abrirse en un sitio web, le llamaríamos index.htm)

EJRV 48


Prácticas de Desarrollo WebLe damos a Guardar. DW seguirá el proceso de guardado:

Ahora el cordón abraza el espacio principal. Lo podemos guardar con el nombre principal.htm

EJRV 49



Sigue el proceso:

EJRV 50


Prácticas de Desarrollo WebAhora estamos guardando el espacio indice. Lo podemos guardar como indice.html Sigue el proceso: Guardamos la parte superior como titulo.html

Una vez guardados nuestros cuatro documentos, comprobamos que en la columna derecha están los cuatro archivos dentro de la carpeta marcos:

Podemos dar formato a cada documento, bien por separado, bien dentro de la estructura del conjunto de marcos:

EJRV 51



Ahora sólo nos resta crear los tres nuevos documentos que se cargarán en el espacio principal al pinchar en los enlaces del menú de la izquierda. A los documentos, los podemos llamar pagina1.htm pagina2.htm y pagina3.htm

Establecemos los vínculos (con el conjunto de marcos abierto). Seleccionamos página 1 y vinculamos con pagina1.htm

EJRV 52


Prácticas de Desarrollo WebAceptamos y lo importante es elegir el destino correctamente:

mainFrame es el espacio principal, leftFrame el izquierdo, topFrame el superior. Los destinos que quedan ya no son propios de nuestros marcos concretos: _blank es cargar en ventana nueva, _parent es en el caso de marcos anidados, _self es el que está siempre por defecto, en el propio sitio y _top ocupando toda la pantalla.

Podemos estirar o encoger el ancho de cada uno de los marcos, simplemente colocando el cursor sobre uno de los bordes. La flechita blanca se convertirá en doble flecha negra y arrastrando, podremos modificar la anchura establecida originalmente. Si los bordes entre marcos se ocultan, esto no lo podremos hacer. Bastará para ponerlos de manifiesto el darle a Ver > Ayudas visuales > Bordes de marco

EJRV 53


Prácticas de Desarrollo WebObserva los bordes activados:

Nos queda poner un título al conjunto de todos los marcos (y, si quieres, a cada marco). Para hacerlo al conjunto, pincha primero en cualquiera de los bordes de los marcos para que aparezca la etiqueta <frameset> por encima del panel de propiedades

En ese momento, ya podemos colocar el título:

Comprobación de que funcionan los marcos.

Entender los marcos

Abrimos nuestro conjunto de marcos haciendo doble clic sobre el nombre del archivo y damos un clic en cualquiera de los bordes para que aparezca una o dos veces la etiqueta frameset encima del Inspector de Propiedades. Si damos un clic en el borde horizontal aparecera un frameset.

EJRV 54



Si lo hacemos en el borde vertical, aparecerán las dos etiquetas de los frameset.

Esto tiene que ver con que el primer frameset ha consistido en la división del esapcio en dos filas (la estrecha del título y la otra). El segundo frameset ha consistido en la división de esa segunda fila en dos columnas. Son dos framesets, por tanto, anidados.

Ahora damos un clic en para acceder al código. Veremos algo así:

Lo primero que tenemos que observar es que es una página un tanto especial. Es un documento web que no tiene body. La etiqueta de body ha sido sustituida por la etiqueta frameset. El resto de código es bastante similar.

Vamos a intentar entenderlo, al menos en parte.

Empezamos en Quiere decir que la primera división del espacio ha consistido en dos rows filas, la primera de 101 píxeles y la segunda "de lo que quede" eso quiere decir el asterisco. Dejamos el resto de los atributos de esa fila.

EJRV 55


Prácticas de Desarrollo WebAhora, las dos filas creadas, han dado origen a

1. Un frame en el que se ha cargado src de

source fuente el documento titulo.htm y al que DW le ha llamado topFrame (frame de

arriba).

2. En la segunda fila, en vez de un frame, hemos creado otro

que ha dividido el espacio en dos columnas, primera

de 81 píxeles y la segunda "de lo que quede"

Falta por decir qué se carga en cada uno de los espacios, columnas, de este segundo frameset:

1. En el primero un en el que se carga el

documento indice.htm y que DW lo llama leftFrame o frame de la izquierda.

2. En el segundo, se carga el

documento principal y DW lo llama mainFrame o marco principal.

Estos nombres, topFrame, leftFrame, mainFrame son los que aparecen en el Destino de los vínculos:

Lógicamente yo puedo cambiarlos en este código fuente y, entonces, aparecerán con los nombres cambiados en el menú de destino de los vínculos.

El resto de código:

frameborder="NO" es el borde del marco. En este caso se define que no haya pero se

puede modificar en el Inspector de Propiedades

framespacing="0" es el espacio entre los frames. En este caso, definido a cero.

scrolling="NO" quiere decir que no va a aparecer la barra de desplazamiento, el scrolling.

noresize quiere decir que no vamos a dejar que el visitante pueda modificar la anchura de

los marcos.

La etiqueta <noframes> y lo que viene después, está preparado para poner un contenido

para los navegadores que no soporten marcos. Ahora eso ya casi inexistente.

EJRV 56



PRACTICA 7


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 le damos a Insertar > Formulario> Formulario

Aparecerá un espacio acotado por líneas discontinuas rojas

Ahora, antes de proseguir, vamos a insertar dentro del formulario, una tabla al 80% de ancho que tendrá dos columnas al 50% cada una de ellas. Pondremos varias filas y, el motivo, es colocar los elementos del formulario con un cierto orden.

EJRV 57



En el Inspector de Propiedades, con la tabla seleccionada, le ponemos que la Alinee al Centro:

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

EJRV 58



Nuestro formulario tendrá este aspecto:

Seleccionamos el cuadro de texto (simplemente pinchando) y observamos el Inspector de Propiedades:

Aquí podemos establecer un Ancho de caracteres diferente, los caracteres máximos si queremos fijarlos, elegir una o varias líneas, el valor inicial que puede estar escrito dentro... Lo más importante es cambiar el textfield por lo que queramos que aparezca cuando recibamos el

formulario. Ponemos, por ejemplo, Nombre

Botón de opción

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

EJRV 59



Ecribimos una frase adecuada en la celda de la izquierda:

Activamos el botón y nos vamos al Inspector de Propiedades:

Pues bien, cambiamos el nombre radiobutton por el genérico que queramos darle (ten cuidado de llamarlo siempre exactamente igual para cada una de las opciones) y en Valor activado el correspondiente al sentido de lo que escribamos, por ejemplo:

Damos un intro (con la flecha de mayúsculas para que sea sólo un saldo de línea) y ponemos otro botón de opción:

EJRV 60



Y, en el Inspector de Propiedades (activa el segundo botón) escribiremos:

Acabamos ya con la tercera opción:

Y, en el Inspector de Propiedades escribiremos:

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:

Esto son las propiedades del botón de la última opción.

EJRV 61



Casilla de verificación

En este caso, se pueden elegir más de una opción. No son excluyentes entre sí.

Podemos preguntar sobre lo que más le ha gustado de este Manual. Introducimos la pregunta y empezamos a escribir posibilidades. Ponemos un nombre único para todo el grupo, pr ejemplo, Gustado, y un resumen de cada ítem en el Valor activado. Este es el aspecto de esta parte del formulario

Y estas son las propiedades del último ítem:

EJRV 62



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

Pondremos un nombre al Menú Edad, y seleccionaremos Menú

Al pinchar en Valores de lista... se abre este cuadro de diálogo que vamos rellenando. La Etiqueta es lo que se muestra en el formulario y el Valor es la información que se guarda o que se envía. Se

pulsa el signo + para añadir un ítem y las flechas para subir un valor o bajarlo

EJRV 63



Después de Aceptar, podemos seleccionar algún valor que se muestre como seleccionado inicialmente, eligiéndolo en el Inspector de Propiedades:

Si no elegimos ningún valor inicial, el aspecto de esta parte del formulario es éste:

Podemos incluir un campo de texto para comentarios. Lo hacemos con el Campo de texto y, en propiedades, seleccionamos Varias líneas

Botones Enviar y Borrar

Vamos a colocar el botón para enviar y, si lo deseamos, un botón para borrar todo.Empezamos por el de borrar. Nos situamos en la siguiente celda de la izquierda, alineamos y colocamos el botón. Por defecto, DW coloca el botón para Enviar el formulario:

EJRV 64



Nosotros modificamos los valores en el Inspector de Propiedades:

Colocamos en la celda de la derecha el botón para enviar:

Podemos dar por finalizado el formulario. Eliminamos la fila que nos ha sobrado.

Envío del formulario

Sólo nos queda establecer los parámetros para que el formulario se pueda enviar por correo electrónico. La opción más sencilla y funcional. Ahora bien, este formulario requerirá que el equipo desde el que se envía tenga operativa una cuenta de correo de tipo residente. Si no, no se podrá enviar.

EJRV 65


Prácticas de Desarrollo WebPonemos el cursor en cualquier punto dentro del formulario y damos un clic en para que el Inspector de Propiedades nos refiera las características del formulario que quedan pendientes:

Rellenamos en Acción mailto:direcciondecorreo y en Enctype text/plain

Echamos un vistazo al código fuente para ver que ha cogido lo que acabo de escribir:

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.

Aparecerán estos sucesivos mensajes de advertencia:

Aceptamos y sale este otro:

EJRV 66



Le damos a Enviar y, finalmente, se envía:

Y se recibe en el buzón de correo con este aspecto:

Mejorar el aspecto físico del formulario

Todavía podemos poner cada una de las filas de un color, para mejorar la presentación:

Situamos en la primera celda. Damos un clic en <tr> para seleccionar la fila y elegimos un color de fondo:

EJRV 67



Elegimos otro color para la segunda fila y vamos alternando.

EJRV 68



PRACTICA 8


CREACION DEL SITIO

Lo primero que tenemos que hacer es crear una carpeta que será la carpeta en la que guardemos todas nuestras páginas, y todos los archivos que vayamos añadiendo, es la carpeta raíz del sitio. La podemos tener previamente creada o crearla a partir del Dreamweaver. Si tenemos dos particiones en el disco duro del ordenador, elegimos la parte destinada a datos. Le damos a Sitio > Administrar sitios...

Aparecerá el siguiente cuadro de diálogo:

Le damos a Nuevo... > Sitio

Aparecerá momentáneamente este cuadro de diálogo:

EJRV 69



Para, automáticamente, saltar a éste otro: (en el caso de que no salte automáticamente, se le da al botón Editar...)

EJRV 70



Pinchamos en la pestaña Avanzadas: Ver nota 1

EJRV 71



Lo primero que hacemos es poner un nombre al sitio. Por ejemplo, Mi primer sitio y, acto seguido,

pinchamos en la carpeta de Carpeta raíz local. Nos vamos a un disco duro, por ejemplo D

EJRV 72



Pinchamos en para crear una nueva carpeta y le ponemos como nombre mi_primer_sitio (nombre sin espacios vacíos, sin acentos, sin caracteres especiales, preferiblemente minúsculas).

EJRV 73


Prácticas de Desarrollo WebHacemos doble clic en Abrir:

Y después en Seleccionar:

EJRV 74



Observa que ya tenemos definido el sitio con un nombre Mi primer sitio y en una carpeta mi_primer_sitio. . Le damos a Aceptar:

EJRV 75



Y,luego a Listo.

Observa el lateral derecho de la interfaz:

Aparece abierto el sitio Mi primer sitio que está alojado en la carpeta

mi_primer_sitio dentro del disco duro D

EJRV 76



PRACTICA 9


Publicar el sitio

Puede parecer un poco prematuro empezar ya a pensar en publicar nuestra página.Tal como la tenemos apenas tiene un saludo de bienvenida... Carece de contenido y, por 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 manuales... 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 lo aloje

Es la primera condición: conseguir un Servidor o Host que nos proporcione un espacio para alojar la página.Hay algunos que son gratuitos pero, en contra, van a llenar las visitas a tu página con publicidad no siempre suficientemente discreta. Uno de ellos es Yahoo a través de Geocities.Lo primero que hay que hacer es conseguir una cuenta de correo con Yahoo. Una vez conseguida, hay que darse de alta en Geocities con el nombre de usuario (ID) y la contraseña que te has creado en la cuenta de correo de Yahoo.

Otra posibilidad son los espacios proporcionados por algunas empresas a sus empleados, por las universidades a sus profesores y estudiantes, por las consejerías de educación, por los ministerios,. Estos espacios son mejores pues no tienen publicidad aunque, en algunos casos, no son de acceso totalmente público.

¿Cual es la dirección URL?

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.

En el caso de Geocities, Supongamos que el nombre de usuario o ID es angelpuente56 (su dirección de correo es [email protected]), pues bien, la dirección URL de su página es http://es.geocities.com/angelpuente56/ y se visualizará siempre y cuando su primera página se llame index.htm o index.html En caso de llamarse pagina0.htm habrá que añadir a la dirección anterior, el nombre del archivo inicial pagina0.htm Lo recomendable es llamar a la primera página index.htm

Esta es la imagen inicial de la primera página que, por defecto, crea Geocities:

EJRV 77

http://es.geocities.com/angelpuente56/


http://es.geocities.yahoo.com/

http://edit.europe.yahoo.com/config/mail?.intl=es

http://es.yahoo.com/



Cuando se mande al servidor el index.htm del propietario, esta primera página de Geocities será sustituida por la creada por el usuario.

El simbolito ~ (vírgula) se consigue teniendo pulsada la tecla ALT y pulsando sucesivamente las teclas 1, 2 y 6 del teclado numérico.

Nota: Por motivos históricos y de cambios de nombre, hay otra posibilidad de funcionamiento de las dos direcciones anteriores. La de correo funciona exactamente igual cambiando cnice por pntic pero entonces mecd hay que cambiarlo por mec y lo mismo en la dirección URL de la página. Sería: [email protected] y para la web: http://roble.pntic.mec.es/~apuente/.

En este sitio tengo una publicación. Si el lector ha pinchado en el vínculo habrá comprobado que no se cargaba la página. ¿Por qué no se carga? Pues porque la primera página no se llama index.htm A propósito he querido ponerle un nombre que describiese el contenido del sitio. La primera página se llama colores.html pues bien, el sitio se hará visible añadiendo a la dirección anterior el nombre del primer archivo: http://roble.pntic.mec.es/~apuente/colores.html

Por último, considerar que aunque es indiferente llamar a nuestras páginas con la extensión larga .html o con la corta .htm si en la dirección anterior suprimimos la última letra, la página no se visualiza. Luego las extensiones son dos posibles pero, después, a cada archivo hay que llamarlo con la extensión con la que se ha creado.

Transferencia de ficheros

Podemos emplear un programa específico de transferencia de ficheros por FTP (File Transfer Protocol o Protocolo de Transferencia de Archivos) como el WS_FTP o el CUTE o el FileZilla (este último es software libre y funciona muy bien). Pero no es necesario. El Dreamweaver es perfectamente capaz de realizar la transferencia sin ningún problema.

EJRV 78

http://www.softonic.com/ie/19825/FileZilla

http://www.softonic.com/ie/17689/CuteFTP

http://www.softonic.com/ie/4940/Ipswitch_WS_FTP

http://roble.pntic.mec.es/~apuente/colores.html

http://roble.pntic.mec.es/~apuente/


http://roble.pntic.mec.es/~html0058/mariajesusrodriguez/



Transferencia desde Dreamweaver

Lo que hay que hacer primero es configurar los datos del remoto. Para ello hay que darle a Sitio > Administrar sitios

Se abrirá la ventana de Administar sitios con todos los sitios que tengamos definidos y con el que estemos trabajando, seleccionado.

Damos click en Editar...

EJRV 79



Pero ahora nos interesan los Datos remotos:

Vamos a poner dos ejemplos concretos. El de Geocities y el del CNICE.

En el caso de Geocities:

EJRV 80


Prácticas de Desarrollo WebDesplegamos las posibilidades del Acceso, elegimos FTP y rellenamos los datos del Servidor FTP, Directorio del Servidor (en el caso de Geocities no hay que poner nada), el nombre de Usuario (la ID de Yahoo) y la Contraseña. Seleccionamos Guardar y lo demás lo dejamos como está:

Pinchamos en el botón Prueba para comprobar que se conecta correctamente. Aparecen estos mensajes:

Aceptamos y le damos a Listo. Volvemos a nuestro sitio y nos fijamos en la parte derecha:

EJRV 81



Hacemos doble clic sobre los dos enchufes. Se intentará la conexión:

A veces, aparece este mensaje temporal:

Cuando se haya producido la conexión, desaparecerán los mensajes, los enchufes permanecerán enganchados y el piloto verde encendido. Y... ¡¡cuidado!! Dreamweaver se va automáticamente a la Vista remota.

EJRV 82



Tenemos que volver a la Vista local:

Volvemos a nuestra Vista local:

Seleccionarmos el archivo que queremos transferir y pinchamos en la flecha azul (colocar archivos)

Primero nos preguntará si queremos que mande también los Archivos dependientes:

Los archivos dependientes son, fundamentalmente, las imágenes que lleva la página. Es una opción muy valiosa que permite al DW ver las imágenes que tiene el documento y enviarlas al servidor. En

EJRV 83


Prácticas de Desarrollo Webeste caso como no tenemos, da igual lo que digamos. Aparecerá, entre otros, el mensaje de la transferencia del archivo:

Cuando acabe, para ver si se ha producio correctamente la transferencia, deberemos visitar la URL:

http://es.geocities.com/angelpuente56/ .

EJRV 84

http://es.geocities.com/angelpuente56/



PRACTICA 10


Vínculos

Los vínculos , hipervínculos , enlaces , hiperenlaces, links (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 del Inspector de Propiedades y elegimos el archivo vinculado.

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

Y vamos al Inspector de Propiedades (si no está abierto, lo abrimos pinchando en

) y , tenemos dos opciones. Por una vez vamos a ver dos formas diferentes de hacer las cosas.

La primera es pinchar en el icono del apartado

y arrastar sin soltar hasta pillar el archivo al que queremos que apunte el vínculo. Si la columna derecha no está visible, hazla visible antes

damos click en el icono

La segunda es pinchar en el icono carpeta que está al lado. Se abrirá la carpeta con nuestros archivos, seleccionamos el adecuado y aceptamos.

EJRV 85

http://olmo.cnice.mecd.es/manual_dwmx_04/paginas/05.htm



La palabra o frase activadora del vínculo quedará marcada de otro color (normalmente azul y subrayada, pero esto se puede modificar como ocurre en este documento). Para comprobar el funcionamiento, guardaremos los cambios, le daremos al F12 y veremos que al pinchar sobre la frase nos vamos al otro documento.

Vínculos a documentos externos

Son los vínculos que nos llevan a otros documentos que no son de nuestro sitio. Se comienza igual: seleccionando la palabra, frase, imagen,... que será la activadora del vínculo. En este caso vamos a partir de una imagen:

Supongamos que queremos hacer que este logo de Google nos lleve a la página principal del famoso buscador. Seleccionamos primero la imagen: se colocará un borde de color negro con tiradores en los laterales derecho e inferior:

EJRV 86

http://www.google.es/



y en Vínculo del Inspector de Propiedades escribimos la

dirección URL de destino: En los vínculos externos es norma de estilo casi obligada que los vínculos se carguen en ventana nueva del navegador. Esto favorece mucho la navegación. Para hacerlo, elegimos en Destino la

opción _blank Nuestra imagen vinculada tiene estos tres

parámetros:

Un nuevo parámetro de bastante importancia es colocar un texto alternativo para la imagen. Útil tanto en imágenes activadoras de vínculos como en imágenes normales. Si el visitante opta por no cargarse las imágenes (por rapidez en la carga, por ejemplo) se encontrará con un texto alternativo.

Esto se hace en (con la imagen seleccionada, claro):


En este mismo sitio tienes abundantes ejemplos de este tipo de vínculos.

Desde un menú tipo índice, accedemos a cada uno de los apartados de ese índice. Y todos los apartados forman parte del mismo documento. Para hacer esto posible, primero hay que definir las anclas o puntos de destino de los vínculos. Dreamweaver lo llama Anclaje con nombre. Situamos el cursor en el punto en el que queramos situar el ancla y le damos a Insertar > Anclaje con nombre.

EJRV 87



Aparecerá este cuadro de diálogo:

Tenemos que ponerle un nombre siguiendo las mismas reglas que en los nombres de archivos y carpetas: no acentos, no espacios, no caracteres especiales, mejor minúsculas, mejor nombres cortos y comenzando por letra.

En el sitio donde hemos colocado el ancla aparece este icono de color amarillo (invisible en modo navegación):

Si pincho sobre el icono del ancla, en el Inspector de Propiedades observo todos los parámetros del mismo:

EJRV 88



Una vez fijado el anclaje, para establecer el vínculo procedemos, primero, como en los casos anteriores, seleccionando la palabra o frase que activará el vínculo

Y, a continuación en el panel del Inspector de Propiedades escribimos el vínculo con el carácter almohadilla delante:

Y ya estará.

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

Los dos tipos anteriores de vínculos se pueden unir. Es decir, podemos hacer vínculos a puntos concretos de otros documentos de nuestro sitio. Para ello, lógicamente, tendremos que haber definido previamente el anclaje. Una vez hecho esto, primero se define el vínculo al documento y, posteriormente, se prolonga la dirección vinculada con la coletilla #ancla

Veamos un ejemplo: supongamos que queramos ir al apartado 08.4.2.- que se encuentra en el documento 03.htm Primero vinculamos con el documento

EJRV 89



Y, después, añadimos el nombre del ancla precedido de #

Comprobar que funciona:

Ir al apartado 08.4.2.- del documento 03.htm

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.

Primera posibilidad: La dirección de correo es visible en el documento.Le damos a Insertar > Vínculo de correo

EJRV 90

http://olmo.cnice.mecd.es/manual_dwmx_04/paginas/03.htm#a0842



Y, en el siguiente cuadro de diálogo escribimos el texto y la dirección de correo coincidentes:

Resultado:

[email protected]

Segunda posibilidad: El texto activador del vínculo es diferente.Se comienza igual pero se escribe:

Resultado:

Escríbeme

Tercera posibilidad: A partir de una imagen.Insertamos la imagen, la seleccionamos y, en el Inspector de Propiedades escribimos mailto:direcciondecorreo

EJRV 91




Prácticas de Desarrollo WebResultado:

Cuarta posibilidad: Indicar la dirección sin activar el vínculo debido a los abusos de la recopilación de firmas por medio de robots que recorren las páginas de internet para el envío de spams indiscriminados, es lo que se hace últimamente, indicar la dirección de correo pero no vincularlo y, tampoco, mostrar la arroba, pues es el criterio de actuación de los robots. "Pillar las cadenas de texto en la que haya una arroba". Esto se puede hacer tanto a nivel superficial, del body mostrado en pantalla, como a nivel de código fuente. Por eso, la ternera posibilidad, la de la imagen vinculada, no protege contra el copiado pues, a nivel código fuente, la dirección es perfectamente pillable.

Las soluciones posibles son, escribir @ de otra forma:

apuente(arroba)cnice.mecd.es

EJRV 92


crear un archivo nuevo html.doc

Documents