Crear Un Archivo Nuevo HTML

Centro de Estudios Cientficos y tecnolgicos No.
5 Benito Jurez Prcticas 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
Ntese que es compatible la instalacin del nuevo Dreamweaver MX 2004 con el anterior DreamweaverMX.,Al abrirlo por vez primera aparece este mensaje de configuracin del espacio de trabajo. Elegimos Diseador.
EJRV
Centro de Estudios Cientficos y tecnolgicos No. 5 Benito Jurez Prcticas de Desarrollo Web
Aparecer 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, ms estrecha, como en la izquierda, ms 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
Pero este tabln de mandos no siempre va a estar visible. El mejor mtodo es hacerlo por medio de Archivo > Nuevo...
EJRV
Aparecer este nuevo cuadro de dilogo. Elegimos Pgina bsica y HTML y pulsamos en el botn Crear
Y llegaremos al mismo sitio ya explicado, un Untitled-1 listo para convertirse en nuestra primera pgina.
EJRV
EJRV
Procedemos, a continuacin, a su guardado. Le damos a Archivo > Guardar
Dreamweaver proceder a guardar el documento en la carpeta raz del sitio
Realizar un documento, formato de pagina y cambiar el fondo de la pagina.

Simplemente empezamos a escribir en el espacio vaco. Le damos un "enter" para saltar de lnea.
EJRV
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 posicin:
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 situacin anterior. Para efectuar los cambios que necesitemos, tendremos que seleccionar previamente el texto que queramos modificar:
EJRV
He seleccionado la primera palabra. Le he aplicado un Encabezado 1, lo he centrado, no he cambiado el tipo de fuente, ni el tamao (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 seleccin de formatos: Estilo 1 Modifico ahora la segunda frase
EJRV
Ahora he puesto en negrita, centrado, he cambiado el tipo de fuente, he puesto como tamao grande y he elegido ese color. Dreamweaver le ha puesto como nombre Estilo 2. Observa que, mientras hacemos algn cambio y no guardamos, aparece un asterisco en la pestaa que nos indica el documento que tenemos abierto:
Lo guardamos con Archivo > Guardar
Y el asterisco desaparece:
EJRV
Conviene guardar cada cierto tiempo por lo que pueda pasar... Vamos ahora a poner un color de fondo. Damos un clic en el botn Propiedades de la pgina... del Inspector de propiedades y se abre el cuadro de dilogo:
Damos un clic en Color de fondo y elegimos uno:
Se habr colocado en su sitio:
EJRV
Le damos a Aceptar:
Guardamos y cargamos en el navegador con la tecla F12:
EJRV
Ahora he puesto en negrita, centrado, he cambiado el tipo de fuente, he puesto como tamao grande y he elegido ese color. Dreamweaver le ha puesto como nombre Estilo 2. Observa que, mientras hacemos algn cambio y no guardamos, aparece un asterisco en la pestaa que nos indica el documento que tenemos abierto:
Lo guardamos con Archivo > 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 prrafos anteriores al decir "cargar la pgina con otro navegador". A veces puede ocurrir tambin 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 acompaa 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 botn derecho del ratn 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 diseo de una pgina 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 lmites de las celdas. Pero, insisto, nos habr servido para colocar los elementos en los puntos, ms o menos, deseados. Para insertar una tabla, le damos a Insertar > Tabla
Aparecer un cuadro de dilogo como ste:
EJRV
15
Podemos definir, de entrada, el nmero de filas y columnas, el ancho que ocupar en % o en pxeles, el grosor del borde, el relleno de celda o el espacio en pxeles 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 pxeles tambin. 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 pxeles y un relleno de celda de 5 pxeles 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 ms 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, divisin) hace referencia a una divisin 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 Maana Tarde
Martes
Mircoles
Jueves
Viernes
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 nmero de filas y el de columnas. Establecer un ancho y un alto diferentes (en % o en pxeles). 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 algn cambio en la tabla:
Hemos aadido una fila, incrementado el grosor del borde a 5 pxeles, establecido un color de fondo y otro diferente para el borde. El resultado es ste:
Lunes Maana Tarde
Martes
Mircoles
Jueves
Viernes
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 negrita:
y en
el texto escrito en la fila se colocar centrado en cada celda
Lunes Maana Tarde
Martes
Mircoles
Jueves
Viernes
Otra forma de seleccionar filas o/y celdas consiste en situar el cursor en una de las celdas y arrastar con el ratn 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 agruparn en una sola:
Lunes Maana Tarde
Martes
Mircoles
Jueves
Viernes
Hemos seleccionado por el mtodo de arrastrar el cursor, las celdas siguientes para cambiar el color de fondo:
EJRV
19
ste es el resultado:
Lunes Maana Tarde Noche Aula 1 Aula 1
Martes Aula 2 Aula 3
Mircoles Aula 1 Aula 1
Jueves Aula 2 Aula 2
Viernes Aula 1 Aula 1 Fiesta final
Tiempo libre
Para hacer que el ancho de cada columna permanezca fijo y uniforme, primero pienso cunto 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:
Lunes Maana Aula 1 Tarde Aula 1
Viernes Aula 1 Aula 1

EJRV
20
Noche Tiempo libre Fiesta final
EJRV
21
Imgenes 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 imgenes pueden estar sueltas en la carpeta raz 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, estn nuestras imgenes. Para crear una carpeta dentro de la carpeta raz del sitio: damos un clic sobre la carpeta raz en el panel lateral derecho con el botn derecho del ratn 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 imgenes a la carpeta por cualquiera de los procedimientos habituales en Windows. Si por ejemplo, tal como indicbamos 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 mens 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 raz del sitio, aparece este mensaje de advertencia:
EJRV
23
Le decimos que s y se nos abre la carpeta raz 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 imgenes.
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 tambin como fondo de una pgina, 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
Lunes Maana Aula 1 Tarde Noche Aula 1 Martes Aula 2 Aula 3 Mircoles Aula 1 Aula 1 Jueves Aula 2 Aula 2 Viernes Aula 1 Aula 1 Fiesta final
Tiempo libre
Y, en el panel del Inspector de Propiedades, nos fijamos en
Una forma de hacerlo es dando un clic en y, sin soltar el ratn, 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:
Lunes Maana Aula 1 Tarde Noche Aula 1
Viernes Aula 1 Aula 1 Fiesta final
Tiempo libre
A propsito de las imgenes, es muy importante que controlemos el tamao de las mismas para que no tarden mucho tiempo en su descarga cuando alguien visite nuestra pgina. Cuando insertamos una imagen aparece, en el panel del Inspector de Propiedades, una informacin sobre el tamao.
EJRV
26
Otra forma de ver estos tamaos es pulsando el icono
Ampliar/contraer) de la franja lateral derecha. ampliar proporcionando informacin sobre los tamaos de los archivos:
La ventana se
As observamos que nuestro fondo, el fondo01.gif ocupa 3 KB que es un tamao adecuado. Observa, tambin, los dos formatos de imagen que aparecen aqu el .gif y el .png Los dos son muy similares, se emplean para imgnes con colores planos. El tercer formato de la web, el .jpg se emplea para imgenes con muchos matices de color. El formato .ico es un formato de iconos. Lo que ves all es un favicon o una pequea imagen a modo de logotipo que se sita delante de la direccin URL de la pgina y en los listados de los favoritos. En cuanto a los gifs, decir que un uso muy extendido son los gif animados que son imgenes 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 pginas. (Nota: Dreamweaver hace un clculo del tamao por aproximacin redondeando al valor en KB ms prximo por arriba -17,2 KB se convierte en 18 KB por ejemplo-. Si deseas ver el tamao exacto lo puedes hacer desde el explorador de Windows: te situas con el botn derecho del ratn encima de la imagen y le das a Propiedades )
EJRV
27
Este gif se ha sacado de la siguiente direccin: 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
PRACTICA 4 Nombre del alumno ____________________________grupo__________
Vnculos Los vnculos , hipervnculos , enlaces , hiperenlaces, links (todas estas palabras designan el mismo concepto) es uno de los elementos ms importantes del lenguaje HTML con el que se construyen las pginas web. Vnculos a otro documento del mismo sitio Es, quiz, el vnculo ms 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 seccin Vnculo dentro del panel del Inspector de Propiedades y elegimos el archivo vinculado. Por ejemplo. Vamos a hacer que la frase ir a la pgina anterior sea un vnculo con la pgina 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 vnculo. 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
La palabra o frase activadora del vnculo 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. Vnculos a documentos externos Son los vnculos 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 vnculo. En este caso vamos a partir de una imagen:
Supongamos que queremos hacer que este logo de Google nos lleve a la pgina 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 Vnculo del Inspector de Propiedades direccin URL de destino:
escribimos la
EJRV
30
En los vnculos externos es norma de estilo casi obligada que los vnculos se carguen en ventana nueva del navegador. Esto favorece mucho la navegacin. Para hacerlo, elegimos en Destino la
opcin _blank
Nuestra imagen vinculada tiene estos tres
parmetros: Un nuevo parmetro de bastante importancia es colocar un texto alternativo para la imagen. til tanto en imgenes activadoras de vnculos como en imgenes normales. Si el visitante opta por no cargarse las imgenes (por rapidez en la carga, por ejemplo) se encontrar con un texto alternativo. Esto se hace en (con la imagen seleccionada, claro):
Vnculos a otros puntos del mismo documento En este mismo sitio tienes abundantes ejemplos de este tipo de vnculos. 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 vnculos. 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 dilogo:
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 minsculas, mejor nombres cortos y comenzando por letra.
En el sitio donde hemos colocado el ancla aparece este icono de color amarillo (invisible en modo navegacin):
Vnculos a otros puntos del mismo documento
Si pincho sobre el icono del ancla, en el Inspector de Propiedades observo todos los parmetros del mismo:
Una vez fijado el anclaje, para establecer el vnculo procedemos, primero, como en los casos anteriores, seleccionando la palabra o frase que activar el vnculo
Y, a continuacin en el panel del Inspector de Propiedades escribimos el vnculo con el carcter almohadilla delante:
EJRV
32
Y ya estar. Vnculos a puntos concretos de otros documentos del mismo sitio Los dos tipos anteriores de vnculos se pueden unir. Es decir, podemos hacer vnculos a puntos concretos de otros documentos de nuestro sitio. Para ello, lgicamente, tendremos que haber definido previamente el anclaje. Una vez hecho esto, primero se define el vnculo al documento y, posteriormente, se prolonga la direccin 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, despus, aadimos el nombre del ancla precedido de #
Comprobar que funciona:
EJRV
33
Vnculos de correo electrnico Se puede establecer tambin vnculos de correo electrnico a partir de una imagen o un texto, de manera muy similar al resto de los hiperenlaces. Primera posibilidad: La direccin de correo es visible en el documento. Le damos a Insertar > Vnculo de correo
Y, en el siguiente cuadro de dilogo escribimos el texto y la direccin de correo coincidentes:
Resultado: apuente@roble.cnice.mecd.es Segunda posibilidad: El texto activador del vnculo es diferente. Se comienza igual pero se escribe:
Resultado:
EJRV
34
Escrbeme 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 direccin sin activar el vnculo Debido a los abusos de la recopilacin de firmas por medio de robots que recorren las pginas de internet para el envo de spams indiscriminados, es lo que se hace ltimamente, indicar la direccin de correo pero no vincularlo y, tampoco, mostrar la arroba, pues es el criterio de actuacin 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 cdigo fuente. Por eso, la ternera posibilidad, la de la imagen vinculada, no protege contra el copiado pues, a nivel cdigo fuente.
EJRV
35
Una vista al cdigo fuente Ya al principio del Manual, hemos dicho que haba que saber un poco sobre cdigo html para aprender a manejar con soltura un editor como Dreamweaver. Si no tienes mucha idea de a qu nos estamos refiriendo presiona aqu: cdigo html . Si ya sabes, aunque slo sea un poco, de lenguaje html, contina leyendo. Una de las potencialidades de este editor es que podemos pasar al cdigo fuente sin ningn problema pinchando en el icono Pero es que, adems, si selecciono en la vista Diseo un determinado elemento, al pinchar en la vista Cdigo aparecer el cdigo, correspondiente a ese elemento, tambin seleccionado. Lo cual es muy de agradecer pues, a veces, es muy difcil la localizacin entre todo el cdigo de un determinado fragmento. Por ejemplo, si sealo la ltima imagen que he puesto en este documento, la imagen de la vista Diseo y voy al cdigo fuente, aparecer seleccionado todo el cdigo correspondiente a la inclusin 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 pgina 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 pgina est "por encima"
Las letras src vienen de source, fuente en ingls. Aqu nos encontramos tambin el texto alternativo a la imagen alt. Es el texto que se mostrar cuando el visitante visite nuestra pgina sin que se carguen las imgenes (una opcin de navegacin que permite mayor rapidez en las descargas). Tambin, pero slo 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 Diseo en el Inspector de Propiedades... y he colocado la tilde correspondiente: Dreamweaver ha transformado la tilde (carcter especial) en un cdigo legible por todos los navegadores: ó Finalmente aparece la anchura y la altura de la imagen. Salto de lnea Probablemente a estas alturas del curso ya te habrs encontrado con la necesidad de separar dos lneas 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 lnea
EJRV
37
Vamos a observar el cdigo que se genera cuando pulsamos el intro (lo pulso):
El prrafo se ha encerrado entre las etiquetas <p> de apertura y </p> de cierre. Veamos ahora el cdigo que se genera cuando insertamos un salto de lnea (lo inserto):
Observa que el prrafo no se ha cerrado. En vez de cerrarse se ha escrito la etiqueta <br> de break, romper. Como este salto de lnea se emplea muchsimo y est ciertamente bastante escondido, es ms fcil aprenderse el atajo del teclado: se trata de pulsar el intro pero con la tecla de la flecha de las maysculas pulsada. Listas de cosas Cuando queremos realizar una enumeracin 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
Los paseos por el campo Para acabar la enumeracin volvemos a pulsar el mismo botn: Veamos el cdigo que se ha generado:
Se introduce la lista con la etiqueta <ul> unordered list y despus, 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 botn: Estas son mis aficiones por orden de preferencia: 1. 2. 3. El deporte de aventura La msica rock Salir de juerga con mis amigos
Veamos el cdigo que se ha generado:
La etiqueta <ol> de ordered list, lista ordenada. El resto, es lo mismo que en el caso anterior. Sangra del texto Si deseo que una determinada lnea comience algo ms all del margen, no lo conseguir dndole al espaciador. Tendr que pulsar el botn (Sangra de texto) que permitir que el texto se site sangrado desde el margen izquierdo. Puedo pulsarlo varias veces. Hacemos una prueba pulsndolo cuatro veces. Para deshacer la accon pulsar el botn (Anular sangra de texto)
He pulsado 4 veces el botn Sangra de texto. Y pulso intro: Ahora el margen se guarda. Pulso intro: Para volver al margen inicial pulsar la tecla Anular sangra. Pulso intro Pulso 4 veces la tecla . Esta lnea ha vuelto al margen inicial.
Veamos el cdigo 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 ms de un espacio entre dos palabras. Es con Insertar espacio indivisible no breaking space con la secuencia Si lo hacemos desde la vista Diseo 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 combinacin de teclas Ctrl + Maysculas + Espacio Hacemos una prueba Hacemos una prueba
EJRV
40
Hacemos una prueba Hacemos una prueba Hacemos una prueba Vista del cdigo:
En realidad, aunque el no breaking space se ide para que dos palabras separadas no puedan nunca verse cortadas en dos lneas 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 vaca pero con sus paredes y espacio interior perfectamente definido. Por ejemplo, en esta tabla:
relleno
Segn la versin del navegador que emplees, la celda primera y la segunda puede que las veas diferentes. Mira el cdigo:
En la primera celda hay un y en la segunda no hemos puesto nada. En el navegador ambos estn vacas...
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 ms partes de la pantalla permanecen con contenidos fijos y otra parte va cambiando en funcin 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 ttulo del sitio. La parte de la izquierda que contiene los enlaces de los diferentes documentos que forman nuestro sitio web.
La parte ms amplia donde se van a cargar los enlaces que pulsemos.
Para ver el funcionamiento de este marco pulsa aqu . Para crear una pgina con marcos, debemos saber que:
EJRV
42

La estructura de la pgina 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... podra hacerlo como un sitio absolutamente independiente. En ese caso la carpeta marcos sera la carpeta raz. Creamos la carpeta pinchando con el botn derecho del ratn sobre la carpeta raz:
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 ttulo)
EJRV
44
Podra 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 cordn 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 llamaramos index.htm)
EJRV
48
Le damos a Guardar. DW seguir el proceso de guardado:
Ahora el cordn abraza el espacio principal. Lo podemos guardar con el nombre principal.htm
EJRV
49
Sigue el proceso:
EJRV
50
Ahora 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 estn 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 slo nos resta crear los tres nuevos documentos que se cargarn 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 vnculos (con el conjunto de marcos abierto). Seleccionamos pgina 1 y vinculamos con pagina1.htm
EJRV
52
Aceptamos 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
Observa los bordes activados:
Nos queda poner un ttulo 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 ttulo:
Comprobacin 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, aparecern las dos etiquetas de los frameset.
Esto tiene que ver con que el primer frameset ha consistido en la divisin del esapcio en dos filas (la estrecha del ttulo y la otra). El segundo frameset ha consistido en la divisin de esa segunda fila en dos columnas. Son dos framesets, por tanto, anidados. Ahora damos un clic en para acceder al cdigo. Veremos algo as:
Lo primero que tenemos que observar es que es una pgina 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 cdigo es bastante similar. Vamos a intentar entenderlo, al menos en parte. Empezamos en Quiere decir que la primera divisin del espacio ha consistido en dos rows filas, la primera de 101 pxeles y la segunda "de lo que quede" eso quiere decir el asterisco. Dejamos el resto de los atributos de esa fila.
EJRV
55
Ahora, 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 pxeles 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. 2.
En el primero un
en el que se carga el
documento indice.htm y que DW lo llama leftFrame o frame de la izquierda. 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 vnculos:
Lgicamente yo puedo cambiarlos en este cdigo fuente y, entonces, aparecern con los nombres cambiados en el men de destino de los vnculos. El resto de cdigo:
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 despus, est preparado para poner un contenido para los navegadores que no soporten marcos. Ahora eso ya casi inexistente.
EJRV
56
PRACTICA 7 Nombre del alumno ____________________________grupo___________ Formularios
Vamos con una de las herramientas ms tiles en toda pgina web. Es aquella que recoge informacin del visitante y, o bien se almacena en el servidor, o bien, se nos enva a travs de una direccin de correo electrnico. Son los formularios. Para insertar un formulario le damos a Insertar > Formulario> Formulario
Aparecer un espacio acotado por lneas 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 opinin sobre esta pgina 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 mximos si queremos fijarlos, elegir una o varias lneas, el valor inicial que puede estar escrito dentro... Lo ms importante es cambiar el textfield por lo que queramos que aparezca cuando recibamos el
formulario. Ponemos, por ejemplo, Nombre Botn de opcin Vamos ahora a preguntar sobre la opinin de nuestra pgina. En la segunda celda de la columna derecha insertamos un
EJRV
59
Ecribimos una frase adecuada en la celda de la izquierda:
Activamos el botn y nos vamos al Inspector de Propiedades:
Pues bien, cambiamos el nombre radiobutton por el genrico 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 maysculas para que sea slo un saldo de lnea) y ponemos otro botn de opcin:
EJRV
60
Y, en el Inspector de Propiedades (activa el segundo botn) escribiremos:
Acabamos ya con la tercera opcin:
Y, en el Inspector de Propiedades escribiremos:
Si queremos colocar otra pregunta de opcin deberemos llamarla de otra manera para que no se excluyan las selecciones. Por ejemplo podemos preguntarle al visitante sobre sus conocimientos de informtica. El nombre de la opcin podra ser Conoc. Infor. (por ejemplo) El formulario va teniendo este aspecto:
Esto son las propiedades del botn de la ltima opcin.
EJRV
61
Casilla de verificacin En este caso, se pueden elegir ms de una opcin. No son excluyentes entre s.
Podemos preguntar sobre lo que ms 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 mens A continuacin, 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 dilogo que vamos rellenando. La Etiqueta es lo que se muestra en el formulario y el Valor es la informacin que se guarda o que se enva. Se pulsa el signo
para aadir un tem y las flechas para subir un valor o bajarlo
EJRV
63
Despus de Aceptar, podemos seleccionar algn valor que se muestre como seleccionado inicialmente, eligindolo en el Inspector de Propiedades:
Si no elegimos ningn 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 lneas
Botones Enviar y Borrar Vamos a colocar el botn para enviar y, si lo deseamos, un botn para borrar todo. Empezamos por el de borrar. Nos situamos en la siguiente celda de la izquierda, alineamos y colocamos el botn. Por defecto, DW coloca el botn para Enviar el formulario:
EJRV
64
Nosotros modificamos los valores en el Inspector de Propiedades:
Colocamos en la celda de la derecha el botn para enviar:
Podemos dar por finalizado el formulario. Eliminamos la fila que nos ha sobrado. Envo del formulario Slo nos queda establecer los parmetros para que el formulario se pueda enviar por correo electrnico. La opcin ms sencilla y funcional. Ahora bien, este formulario requerir que el equipo desde el que se enva tenga operativa una cuenta de correo de tipo residente. Si no, no se podr enviar.
EJRV
65
Ponemos el cursor en cualquier punto dentro del formulario y damos un clic en para que el Inspector de Propiedades nos refiera las caractersticas del formulario que quedan pendientes:
Rellenamos en Accin mailto:direcciondecorreo y en Enctype text/plain
Echamos un vistazo al cdigo 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 electrnico. Aparecern estos sucesivos mensajes de advertencia:
Aceptamos y sale este otro:
EJRV
66
Le damos a Enviar y, finalmente, se enva:
Y se recibe en el buzn de correo con este aspecto:
Mejorar el aspecto fsico del formulario Todava podemos poner cada una de las filas de un color, para mejorar la presentacin: 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
Nombre del alumno ____________________________grupo___________

CREACION DEL SITIO Lo primero que tenemos que hacer es crear una carpeta que ser la carpeta en la que guardemos todas nuestras pginas, y todos los archivos que vayamos aadiendo, es la carpeta raz 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 dilogo:
Le damos a Nuevo... > Sitio
Aparecer momentneamente este cuadro de dilogo:
EJRV
69
Para, automticamente, saltar a ste otro: (en el caso de que no salte automticamente, se le da al botn Editar...)
EJRV
70
Pinchamos en la pestaa 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 raz 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 vacos, sin acentos, sin caracteres especiales, preferiblemente minsculas).
EJRV
73
Hacemos doble clic en Abrir:
Y despus 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 mi_primer_sitio dentro del disco duro D
que est alojado en la carpeta
EJRV
76
Publicar el sitio Puede parecer un poco prematuro empezar ya a pensar en publicar nuestra pgina. Tal como la tenemos apenas tiene un saludo de bienvenida... Carece de contenido y, por tanto, de inters. Pero este curso quiere hacer hincapi en ensear al interesado de manera minuciosa los pasos que, por experiencia, estn 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 ms ayuda. As que vamos a proceder a desarrollar los pasos necesarios para conseguir publicar nuestra pgina. Conseguir un servidor que nos lo aloje Es la primera condicin: conseguir un Servidor o Host que nos proporcione un espacio para alojar la pgina.Hay algunos que son gratuitos pero, en contra, van a llenar las visitas a tu pgina con publicidad no siempre suficientemente discreta. Uno de ellos es Yahoo a travs 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 contrasea 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 consejeras de educacin, por los ministerios,. Estos espacios son mejores pues no tienen publicidad aunque, en algunos casos, no son de acceso totalmente pblico.
Cual es la direccin URL? Este ordenador servidor nos tiene que proporcionar unas claves para la transferencia de los ficheros y la direccin en la cual se encontrar nuestra pgina inicial. En el caso de Geocities, Supongamos que el nombre de usuario o ID es angelpuente56 (su direccin de correo es angelpuente56@yahoo.es), pues bien, la direccin URL de su pgina es http://es.geocities.com/angelpuente56/ y se visualizar siempre y cuando su primera pgina se llame index.htm o index.html En caso de llamarse pagina0.htm habr que aadir a la direccin anterior, el nombre del archivo inicial pagina0.htm Lo recomendable es llamar a la primera pgina index.htm Esta es la imagen inicial de la primera pgina que, por defecto, crea Geocities:
EJRV
77
Cuando se mande al servidor el index.htm del propietario, esta primera pgina de Geocities ser sustituida por la creada por el usuario. El simbolito ~ (vrgula) se consigue teniendo pulsada la tecla ALT y pulsando sucesivamente las teclas 1, 2 y 6 del teclado numrico. Nota: Por motivos histricos 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 direccin URL de la pgina. Sera: apuente@roble.pntic.mec.es y para la web: http://roble.pntic.mec.es/~apuente/.
En este sitio tengo una publicacin. Si el lector ha pinchado en el vnculo habr comprobado que no se cargaba la pgina. Por qu no se carga? Pues porque la primera pgina no se llama index.htm A propsito he querido ponerle un nombre que describiese el contenido del sitio. La primera pgina se llama colores.html pues bien, el sitio se har visible aadiendo a la direccin anterior el nombre del primer archivo: http://roble.pntic.mec.es/~apuente/colores.html
Por ltimo, considerar que aunque es indiferente llamar a nuestras pginas con la extensin larga .html o con la corta .htm si en la direccin anterior suprimimos la ltima letra, la pgina no se visualiza. Luego las extensiones son dos posibles pero, despus, a cada archivo hay que llamarlo con la extensin con la que se ha creado. Transferencia de ficheros Podemos emplear un programa especfico 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 ningn problema.
EJRV
78
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
Desplegamos 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 Contrasea. Seleccionamos Guardar y lo dems lo dejamos como est:
Pinchamos en el botn 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 conexin:
A veces, aparece este mensaje temporal:
Cuando se haya producido la conexin, desaparecern los mensajes, los enchufes permanecern enganchados y el piloto verde encendido. Y... cuidado!! Dreamweaver se va automticamente 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 tambin los Archivos dependientes:
Los archivos dependientes son, fundamentalmente, las imgenes que lleva la pgina. Es una opcin muy valiosa que permite al DW ver las imgenes que tiene el documento y enviarlas al servidor. En
EJRV
83
este 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
PRACTICA 10 Nombre del alumno ____________________________grupo___________ Vnculos
Los vnculos , hipervnculos , enlaces , hiperenlaces, links (todas estas palabras designan el mismo concepto) es uno de los elementos ms importantes del lenguaje HTML con el que se construyen las pginas web. Vnculos a otro documento del mismo sitio Es, quiz, el vnculo ms 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 seccin Vnculo dentro del panel del Inspector de Propiedades y elegimos el archivo vinculado.
Por ejemplo. Vamos a hacer que la frase ir a la pgina anterior sea un vnculo con la pgina 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 vnculo. 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
La palabra o frase activadora del vnculo 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. Vnculos a documentos externos Son los vnculos 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 vnculo. En este caso vamos a partir de una imagen:
Supongamos que queremos hacer que este logo de Google nos lleve a la pgina 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
y en Vnculo del Inspector de Propiedades
escribimos la
direccin URL de destino: En los vnculos externos es norma de estilo casi obligada que los vnculos se carguen en ventana nueva del navegador. Esto favorece mucho la navegacin. Para hacerlo, elegimos en Destino la
opcin _blank
Nuestra imagen vinculada tiene estos tres
parmetros: Un nuevo parmetro de bastante importancia es colocar un texto alternativo para la imagen. til tanto en imgenes activadoras de vnculos como en imgenes normales. Si el visitante opta por no cargarse las imgenes (por rapidez en la carga, por ejemplo) se encontrar con un texto alternativo. Esto se hace en (con la imagen seleccionada, claro):
Vnculos a otros puntos del mismo documento En este mismo sitio tienes abundantes ejemplos de este tipo de vnculos. 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 vnculos. 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 dilogo:
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 minsculas, mejor nombres cortos y comenzando por letra.
En el sitio donde hemos colocado el ancla aparece este icono de color amarillo (invisible en modo navegacin):
Si pincho sobre el icono del ancla, en el Inspector de Propiedades observo todos los parmetros del mismo:
EJRV
88
Una vez fijado el anclaje, para establecer el vnculo procedemos, primero, como en los casos anteriores, seleccionando la palabra o frase que activar el vnculo
Y, a continuacin en el panel del Inspector de Propiedades escribimos el vnculo con el carcter almohadilla delante:
Y ya estar. Vnculos a puntos concretos de otros documentos del mismo sitio Los dos tipos anteriores de vnculos se pueden unir. Es decir, podemos hacer vnculos a puntos concretos de otros documentos de nuestro sitio. Para ello, lgicamente, tendremos que haber definido previamente el anclaje. Una vez hecho esto, primero se define el vnculo al documento y, posteriormente, se prolonga la direccin 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, despus, aadimos el nombre del ancla precedido de #
Comprobar que funciona: Ir al apartado 08.4.2.- del documento 03.htm Vnculos de correo electrnico Se puede establecer tambin vnculos de correo electrnico a partir de una imagen o un texto, de manera muy similar al resto de los hiperenlaces. Primera posibilidad: La direccin de correo es visible en el documento. Le damos a Insertar > Vnculo de correo
EJRV
90
Y, en el siguiente cuadro de dilogo escribimos el texto y la direccin de correo coincidentes:
Resultado: apuente@roble.cnice.mecd.es Segunda posibilidad: El texto activador del vnculo es diferente. Se comienza igual pero se escribe:
Resultado: Escrbeme Tercera posibilidad: A partir de una imagen.Insertamos la imagen, la seleccionamos y, en el Inspector de Propiedades escribimos mailto:direcciondecorreo
EJRV
91
Resultado:
Cuarta posibilidad: Indicar la direccin sin activar el vnculo debido a los abusos de la recopilacin de firmas por medio de robots que recorren las pginas de internet para el envo de spams indiscriminados, es lo que se hace ltimamente, indicar la direccin de correo pero no vincularlo y, tampoco, mostrar la arroba, pues es el criterio de actuacin 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 cdigo fuente. Por eso, la ternera posibilidad, la de la imagen vinculada, no protege contra el copiado pues, a nivel cdigo fuente, la direccin es perfectamente pillable. Las soluciones posibles son, escribir @ de otra forma: apuente(arroba)cnice.mecd.es
EJRV
92

Crear Un Archivo Nuevo HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Crear Un Archivo Nuevo HTML

Cargado por

Copyright:

Formatos disponibles

Centro de Estudios Cientficos y tecnolgicos No.

5 Benito Jurez Prcticas de Desarrollo Web

. Para recuperar su vista se le da a

Procedemos, a continuacin, a su guardado. Le damos a Archivo > Guardar

Dreamweaver proceder a guardar el documento en la carpeta raz del sitio

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

Si este panel est oculto es porque est en esta posicin:

Lo guardamos con Archivo > Guardar

Damos un clic en Color de fondo y elegimos uno:

Se habr colocado en su sitio:

Guardamos y cargamos en el navegador con la tecla F12:

Lo guardamos con Archivo > Guardar

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

Lo cargo en otro navegador. Esta vez el Mozilla:

Hacemos doble clic en la carpeta para abrirla:

Aparecer un cuadro de dilogo como ste:

La tabla quedar alineada al centro:

Lunes Maana Tarde

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

Lunes Maana Tarde

Observa el aspecto del panel Inspector de Propiedades:

Si, por ejemplo, pulsamos en y en negrita:

el texto escrito en la fila se colocar centrado en cada celda

Lunes Maana Tarde

Lunes Maana Tarde

Lunes Maana Tarde Noche Aula 1 Aula 1

Martes Aula 2 Aula 3

Mircoles Aula 1 Aula 1

Jueves Aula 2 Aula 2

Viernes Aula 1 Aula 1 Fiesta final

Lunes Maana Aula 1 Tarde Aula 1

Martes Aula 2 Aula 3

Mircoles Aula 1 Aula 1

Jueves Aula 2 Aula 2

Viernes Aula 1 Aula 1

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

Nosotros le cambiamos el nombre:

Le decimos que s y se nos abre la carpeta raz del sitio:

Hacemos doble clic sobre la carpeta imagenes:

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

La imagen se habr colocado como fondo de esa celda:

Lunes Maana Aula 1 Tarde Noche Aula 1

Martes Aula 2 Aula 3

Mircoles Aula 1 Aula 1

Jueves Aula 2 Aula 2

Viernes Aula 1 Aula 1 Fiesta final

Otra forma de ver estos tamaos es pulsando el icono

y en Vnculo del Inspector de Propiedades direccin URL de destino:

Nuestra imagen vinculada tiene estos tres

Aparecer este cuadro de dilogo:

Vnculos a otros puntos del mismo documento

Y, despus, aadimos el nombre del ancla precedido de #

Comprobar que funciona:

Y, en el siguiente cuadro de dilogo escribimos el texto y la direccin de correo coincidentes:

Estas son mis aficiones:

Veamos el cdigo que se ha generado:

Veamos el cdigo generado:

En este caso la pantalla se divide en tres partes:

La parte ms amplia donde se van a cargar los enlaces que pulsemos.

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:

Ahora le damos a Archivo > Guardar todo

Nombre del alumno __________________grupo_