SEMINARIO PÁGINAS WEB - Aragonieslbuza.educa.aragon.es/.../curso_web/curso_web.pdf · web con la...

SEMINARIO PÁGINAS

WEB

IES LUIS BUÑUEL

Curso 2004-2005

© Óscar Blasco Laín

IES LUIS BUÑUEL – Seminario páginas web Introducción

© Oscar Blasco Laín 1

¿Que es una página web ? Una página web no es mas que un fichero con extensión .htm. Dentro del fichero aparecen una serie de sentencias (marcas o etiquetas) indicadas en un lenguaje llamado HTML (Lenguaje de marcas de hipertexto) 1. Los ficheros correspondientes a páginas web pueden estar ubicados en servidores remotos de INTERNET (http) o bien en el computador local (mi disco duro).

REMOTO LOCAL Actividades

Ø Accede a la pagina del Departamento de Educación del Gobierno de Aragón. (http://www.educaragon.org)

Ø Accede al código HTML de dicha página web (Ver -> Codigo fuente)

Ø Guarda dicha página (Archivo -> Guardar como) en el escritorio con el nombre educa.

Ø Cierra la página y observa lo que se ha almacenado en el escritorio.

Ø Abre la página guardada en el escritorio (educa.htm)y observa el aspecto de la página.

1 Otras extensiones para páginas web son .asp o .php



¿Que contiene una página web ? Como se ha podido comprobar en la actividad anterior, una página web, además del fichero con la extensión correspondiente, tiene asociado un montón de ficheros. La inclusión de esos ficheros en la página van a proporcionar la “vistosidad” de dicha página (imágenes, animaciones, sonidos, videos, etc...). Desde una página web se puede acceder a otra página web (navegar) mediante los denominados enlaces o hipervínculos que incluya la página. Estos enlaces pueden estar asociados a texto o a imágenes. Actividades

Ø Accede a la carpeta que se ha generado en el escritorio y borra todo su contenido

Ø Abre la página guardada en el escritorio (educa.htm)y observa el aspecto de la página.

¿Que se necesita para realizar una página web ? Una primera forma de realizar páginas web es escribir en un fichero de texto las sentencias HTML correspondientes, por ejemplo mediante el Bloc de notas. Pero la confección de páginas web se facilita enormemente mediante la utilización de un editor de páginas web (FrontPage , Dreamweaver) Actividades

Ø Selecciona el fichero educa.htm y en el menú contextual (botón derecho) selecciona la opción Modificar.



¿Que se necesita para visualizar una página web ? Para acceder a una página web ubicada en un servidor de INTERNET es necesario ejecutar el programa navegador (Internet Explorer o Netscape) y escribir la URL correspondiente en la ventana dirección. En el caso que la página web esté almacenada en el disco duro local, se puede realizar doble clic sobre el fichero correspondiente o bien ejecutar Archivo -> Abrir dentro del navegador.

¿Que es un sitio web ? Normalmente en una página no se incluye mucha información para que el acceso y su tratamiento sea “cómodo”. Un sitio web se podría definir como un conjunto estructurado de páginas web con un misma temática. En nuestro caso, el objetivo es la realización de un sitio web para el centro. Dicho sitio estará compuesto por varias páginas web con distinta temática pero siempre dentro del contexto del centro. Por ejemplo, cada departamento puede tener su propia página con los contenidos que estimen oportunos los miembros del departamento. Actividades

Ø Accede a los siguientes sitios web

http://www.educa.aragob.es/ieslbuza

http://www.educa.aragob.es/aplicadi

http://www.heraldo.es

“Colgar” el sitio en la red Durante el desarrollo del curso se ira realizando la estructura del sitio web, y confeccionado cada una de las páginas que lo compongan. Trabajaremos en nuestro disco duro y a medida que vayamos teniendo las páginas hechas, las deberemos ubicar en el servidor..

IES LUIS BUÑUEL – Seminario páginas web P01- Casi como WORD


Práctica 1 – “Casi como WORD” El objetivo de esta práctica es almacenar un página web de nombre p01.htm en el directorio Curso_web. El aspecto de la página deberá ser el siguiente:

Las acciones a realizar van a ser muy semejantes a las que se realizan a la hora de confeccionar un documento WORD (abrir, guardar, tipo y tamaño de letra, alineamiento, ...). Además se van a realizar acciones específicas de FrontPage, y vamos a tratar los tres “modos” de trabajo que tiene FrontPage:

q Normal : Modificación de la página

q Vista previa : Aspecto que tendrá la página cuando se visualice con el navegador, y en el cual NO SE PUEDE MODIFICAR.

q HTML : Correspondencia de la apariencia de la página con sus correspondientes etiquetas del lenguaje HTML . Se puede modificar pero no es conveniente si no se conoce dicho lenguaje.

IES LUIS BUÑUEL – Seminario páginas web P01- Casi como WORD


Actividades

Ø Ejecutar FrontPage (Inicio -> Programas )

Ø Preparación para tener una pagina web en blanco

(Archivo -> Nuevo -> Pagina o Web / Pagina en blanco)

Ø Guardar la página con el nombre p01 en el directorio Curso_web

(Archivo -> Guardar como)

Ø Asignar como fondo de la página una imagen (carpeta Fondos).

(Archivo -> Propiedades / Fondo /Imagen de fondo)

Ø Inserción de imágenes (carpeta Imagenes)

(Insertar -> Imagen -> Desde Archivo)

Ø Cambiar el formato del texto de la página

(Formato -> Fuente)

Ø Guardar los cambios “regularmente”

(Archivo -> Guardar)

Ø Cambiar el alineamiento de los párrafos

(Formato -> Parrafo -> Alineación)

Ø Inserción de una línea horizontal

(Insertar -> línea horizontal)

Ø Cambio del sangrado de los párrafos

(Formato -> Parrafo -> Sangría)

IZQUIERDO : Antes del texto

DERECHO : Después del texto

Ø Comprobar el aspecto de la página mediante el navegador

Ø Observar el código HTML generado

IES LUIS BUÑUEL – Seminario páginas web P02- Hipervínculos


Práctica 2 – Hipervínculos La página web construida en la práctica anterior muestra una serie de información, texto e imágenes, pero no proporciona enlaces (hipervínculos) a otras páginas. El objetivo de esta práctica es almacenar un página web de nombre p02.htm en el directorio Curso_web. El aspecto de la página será el mismo que la anterior, pero se añadirán dos hipervínculos dentro de la página. El primero estará asociado al texto “LUIS BUÑUEL” de la primera línea, y el segundo estará asociada a la imagen del final de la página.

Si se “pincha” encima del primer hipervínculo, se deberá enlazar con una página web almacenada en el disco duro local en la carpeta Pagina_LB de nombre por_bun.htm. Mientras que al “pinchar” sobre el segundo, se accederá a la página web de INTERNET del Departamento de Educación de la DGA (http://www.educaragon.org) en una ventana distinta a la actual. Para la inserción de un hipervínculo es necesario primeramente seleccionar el texto o imagen que va a servir de enlace, para después insertar propiamente el hipervínculo (Insertar -> Hipervínculo)

Si se selecciona el texto “LUIS BUÑUEL” y se accede a la opción del menú especificada, aparece un dialogo que deberá ser manipulado para que se corresponda con el de la figura siguiente.



Para insertar el segundo hipervínculo es necesario seleccionar la imagen y acceder a la misma opción del menú (Insertar -> Hipervínculo). El dialogo deberá dejarse de la siguiente forma:

Antes de seleccionar el botón ACEPTAR, es necesario especificar que la página web a la que se accede se muestre en una ventana distinta a la actual. Para ello se debe “pinchar” en el botón Marco de destino y seleccionar la opción indicada en la figura siguiente:



Actividades

Ø Una vez que has insertado los dos hipervínculos en la página, cierra FrontPage y prueba los enlaces mediante el navegador.

Ø Como has podido observar, cuando se accede a la página de Luis Buñuel no se puede retornar a la página “origen”. Debes modificar la página por_bun (carpeta Pagina_LB) para dejarla con el siguiente aspecto:

y asociar un hipervínculo a la imagen insertada (fichero home en la carpeta Animaciones) para que retorne a la página original (p02.htm de la carpeta Curso_web).

Ø Cuando se visualiza una página web con el navegador, aparece el título de dicha página en la línea superior de la ventana (en el ejemplo anterior “Luis Buñuel”). Para asociar un título a la página (no confundir con el nombre de la página que se utiliza para almacenarla en el disco duro) se debe acceder al menú (Archivo à Propiedades /General /Título ). Cambia los títulos de las páginas realizadas hasta ahora como “Práctica 01” y “Práctica 02”.

IES LUIS BUÑUEL – Seminario páginas web P03- Hipervínculos dentro de la página


Práctica 3 – Hipervínculos dentro de la página En la práctica anterior hemos tratado hipervínculos (enlaces o links) a otras páginas web distintas a la actual, ya sean en INTERNET (http://www.educaragon.org) o en el disco duro local (carpeta Pagina_LB de nombre por_bun.htm). Para insertar un hipervínculo externo a la página web es necesario primeramente seleccionar el texto o imagen que va a servir de enlace, para después insertar propiamente el hipervínculo (Insertar -> Hipervínculo) Como hemos podido comprobar el hipervínculo se puede asociar tanto a texto como a imágenes, y cuando el cursor se mueve por encima de cualquier hipervínculo, éste se transforma en una mano que apunta con un dedo. Para comprobar que un hipervínculo “funciona” correctamente, es necesario probarlo en la vista previa de FrontPage o bien mediante el navegador. En esta práctica se van a realizar hipervínculos que van a apuntar a la propia página web, son los denominados marcadores. Un marcador es un indicador de una posición dentro de la página web con la intención de “saltar” y posicionarse en ellos a través de un hipervínculo. Suelen utilizarse en páginas de gran tamaño (p.e. páginas con capítulos o secciones) para facilitar el desplazamiento entre las distintas partes de las mismas; aunque pueden emplearse la barra de desplazamiento, puede resultar mas cómodo y rápido incorporar al principio de la página un índice con los hipervínculos a los distintos apartados (marcadores) de la página. Si al visualizar una página web con el navegador aparece en la ventana dirección

eso indica que estamos viendo un apartado concreto o marcador , ¿Qué familia de …?, dentro de la página web p03.htm.



En esta práctica se van a añadir una serie de hipervínculos en una página web existente (p03.htm) que deberás copiar en tu carpeta Curso_web desde el computador del profesor (pc-profe). Dicha página contiene una serie de preguntas y respuestas relativas a INTERNET, al comienzo de la página existe un índice de las preguntas que contiene la página. El objetivo es crear para cada pregunta un marcador y enlazarlo con su entrada dentro del índice (para las tres primeras ya están creados). Lo primero que se debe realizar es crear el marcador, y después insertar el hipervínculo asociado a dicho marcador. Para crear el marcador, en nuestro caso cada una de las preguntas que contiene la página, es necesario posicionarse en el lugar donde se encuentra la pregunta, o bien seleccionar el texto de la pregunta, y posteriormente acceder a la opción Marcador del menú Insertar.

En el dialogo que aparece, ver figura adjunta, se propone como nombre del marcador el texto seleccionado (se puede poner el que queramos) y muestra una lista con los marcadores ya creados en la página. Para crearlo es necesario pulsar sobre el botón ACEPTAR.

NOTA : en el caso que se deseara borra un marcador existente, se seleccionaría en la lista y se pulsaría el botón BORRAR.

Al realizar la operación anterior, el texto asociado al marcador ha cambiado de apariencia en la vista normal : se muestra con un subrayado intermitente.



La siguiente acción a realizar es la inserción del hipervínculo asociado al marcador que acabamos de crear. Para ello se debe seleccionar el texto ( o imagen) y acceder a Insertar -> Hipervínculo. En este diálogo se debe “activar” la opción Lugar de este documento , con lo que nos aparece en la ventana la lista de marcadores existentes en la página. Para crear el hipervínculo se debe seleccionar el marcador al que queremos “saltar”.

Al igual que en cualquier hipervínculo, se pueden modificar los parámetros de lo que se va a visualizar (nueva ventana ..) al pulsar sobre el botón Marco de destino. En el caso de hipervínculos dentro de la propia página no se suele modificar nada, ya que el valor predeterminado es visualizarlo dentro de la misma ventana y es lo mas adecuado. Al probar los efectos de esta modificación dentro de la página, observamos que se ha conseguido el efecto de “salto” desde el índice hasta la pregunta, pero si queremos regresar al índice debemos utilizar la barra de desplazamiento. Vamos a utilizar esta misma técnica para incluir en la página un hipervínculo de “vuelta” detrás de cada pregunta. Este hipervínculo estará asociado a un marcador situado al comienzo de la página, con lo que garantizamos el “salto de vuelta”.



Primeramente se debe crear el marcador. En este caso no vamos a seleccionar nada antes de insertarlo, SOLO SITUAREMOS EL CURSOR AL COMIENZO DE LA PAGINA, y accederemos a la opción del menú Insertar -> Marcador. Al no seleccionar nada el diálogo no propone ningún nombre de marcador, por lo que debemos definir nosotros dicho nombre. En este caso es conveniente poner un nombre que indique el comienzo de la página (p.e. indice).

Ahora solo resta insertar los hipervínculos asociados a este marcador. Para ello insertaremos una imagen (subir.gif en carpeta imagenes) que representará el hipervínculo, y que deberá aparecer al terminar cada pregunta.



Actividades

Ø Muestra los caracteres “invisibles “ dentro de la vista normal de FrontPage. ¿Cómo se representa el marcador que acabamos de crear el comienzo de la página? ¿Cómo se borraría dicho marcador?

Ø Completa la página p03.htm para establecer hipervínculos y marcadores para todas las preguntas contenidas en dicha página como se ha especificado en este documento (tanto de “ida” como de “vuelta”).

Ø Modifica el hipervínculo desde dicha página que se enlaza con la página por_bun (carpeta Pagina_LB). Debes quitarlo del texto “LUIS BUÑUEL” y ponerlo en la imagen que representa el logotipo del instituto. Además la página se visualizará en una página nueva.

Ø Añade un hipervínculo a la página web de la Universidad de Zaragoza (http://www.unizar.es) dentro de de página p03.htm. Este hipervínculo se “activará” al pulsar sobre el texto “Universidad de Zaragoza” contenido en la última pregunta (Nombres de dominio) y deberá aparecer en una nueva ventana.

Ø Modifica la página por_bun (carpeta Pagina_LB) para insertar un hipervínculo que se enlace con la página lb_biografia (carpeta Pagina_LB) . Dicho hipervínculo lo debes asociar a la imagen que representa el rostro de Luis Buñuel. Además deberás quitar el hipervínculo asociado a la animación (y la propia animación) insertada al final de la página

Ø Modifica la página lb_biografia (carpeta Pagina_LB) para insertar un hipervínculo que retorne a la página desde la que se llama (por_bun). Además deberás poner una imagén de fondo (carpeta fondos), e insertar una especie de índice al principio de la página para hacer referencia interna a los años que aparecen en azul dentro de la página (igual que lo realizado en la página p03.htm). Asimismo, debes habilitar un mecanismo para retornar desde cualquier sección de la página al comienzo de ella.

IES LUIS BUÑUEL – Seminario páginas web P04 – Tablas y algo mas


Práctica 4 – Tablas y algo mas Si visualizas la página realizada en la práctica anterior, se observa que en la cabecera existe una gran cantidad de espacio “desperdiciado”, representado mediante los rectángulos en la figura siguiente. Al visitar En la práctica anterior hemos tratado hipervínculos (enlaces o links) a otras páginas web distintas a la actual, ya sean en INTERNET (http://www.educaragon.org) o en el disco duro local (carpeta Pagina_LB de nombre por_bun.htm). Para insertar un hipervínculo externo a la página web es necesario primeramente seleccionar el texto o imagen que va a servir de enlace, para después insertar propiamente el hipervínculo (Insertar -> Hipervínculo) Esto es debido al posicionamiento que hemos decidido para esta parte de la página. Podríamos aprovechar mejor el espacio si el nombre de los autores apareciera al mismo nivel que el nombre del centro..

Con lo que sabemos hasta ahora no es posible realizar este formato, ya que dentro de un párrafo solo puedo tener una alineación: izquierda, derecha, central o justificada. La solución para poder realizar esto son la utilización de TABLAS, que nos van a proporcionar un mejor posicionamiento de los objetos (texto o imágenes dentro de la página). Actualmente casi todas las páginas utilizan este formato y su utilización es muy semejante al manejo de tablas de WORD. Cuando se inserta una tabla se deben especificar las dimensiones de dicha tabla, numero de filas y de columnas, aunque puedan modificarse posteriormente. Cada celda de la tabla puede contener texto o imágenes a los que se puede aplicar un formato distinto de las demás celdas de la tabla. El objetivo de esta práctica es generar la página p04.htm, con el mismo contenido que la página anterior p03.htm, con el formato de la imagen anterior. Para ellos debes realizar las actividades detalladas a continuación.

IES LUIS BUÑUEL – Seminario páginas web P04 – Tablas y algo mas


Actividades

Ø Abre la página p03.htm y guardala como p04.htm (Archivo à Guardar como)

Ø Antes de insertar una tabla es necesario posicionarse en el lugar adecuado dentro de la página. En nuestro caso, el cursor debe situarse al comienzo de la página. Para insertar la tabla se accede a la opción Tabla à Insertar à Tabla , donde deberemos especificar las dimensiones (1 fila, 3 columnas), el ancho (100%) y el borde ( 0 = sin borde).

Ø Una vez insertada la tabla, hay que llevar a cada celda el contenido que deseamos. Esto se puede realizar arrastrando el texto o la imagen desde el cuerpo de la página hasta la celda correspondiente en la tabla.

Ø Lo mas sencillo para adecuar la anchura de las columnas es colocar el cursor en la frontera entre columnas y cuando aparezca una flecha de doble punta, pinchar-arrastrar y soltar para cambiar la anchura de las columnas. También puede realizarse de la siguiente forma : seleccionar la columna en cuestión (Tabla à Seleccionar à Columna) y cambiar el ancho (Tabla à Propiedades de Tablas à Celda / Ancho ).

Ø La alineación de cada celda debe cambiarse independientemente : izquierda, centrada y derecha, respectivamente para cada celda de la tabla.

Ø Como se puede apreciar en la figura de la página anterior, el texto en la celda de la última columna aparece en dos líneas. Esto se puede conseguir pulsando la tecla <RETURN>, con lo que se dispone de dos párrafos independientes, o bien pulsando la tecla de mayúsculas a la vez que se pulsa la tecla <RETURN>, para conseguir un salto de línea pero no párrafos distintos (Ver el carácter invisible que se genera).

Ø Establece una imagen como viñeta a cada pregunta :(carpeta Botones).

Formato à Numeración y viñetas à Viñetas de imagen

Ø Modifica la pagina por_bun, para incluir al final de ella un hipervínculo a la página web del instituto (http://www.educa.aragob.es/ieslbuza ). Dicho hipervínculo, en nueva ventana, estará asociado a la imagen que se corresponde con el logotipo del instituto (logo_ies).

IES LUIS BUÑUEL – Seminario páginas web P05 – Hipervínculos a ficheros


Práctica 5 – Hipervínculos a ficheros Cuando se “navega” por la WWW se estan realizando hipervínculos (conexiones o links) entre distintas páginas web, ya esten situadas en INTERNET o en el disco duro local. Lo que vamos a realizar en esta práctica es incluir hipervínculos a ficheros que no son páginas web : documentos word, hojas excel, etc.. El efecto que tiene un hipervínculo sobre un fichero es el de “abrirlo” con el programa adecuado. Si hacemos un hipervínculo a un fichero con extensión .doc se abrirá con el programa Microsoft Word, si el fichero tiene extensión .xls se abrirá con el programa Microsoft Excel, etc.. Un formato muy comun de ficheros que incluyen hipervínculos dentro de las páginas web son los documentos con extensión .pdf. La característica de estos ficheros es que no se puede modificar su contenido, solo se puede visualizar si se dispone del programa Acrobat Reader (gratuito). El objetivo de esta práctica es modificar la página lb_biografia.htm, para que la parte superior de la página se corresponda con la imagen siguiente:

Como se puede apreciar se debe insertar una tabla y aplicar diversos formatos a la tabla en general y las celdas en particular. Las imágenes necesarias estan en la carpeta imagenes dentro de la carpeta pagina_lb. Se deben insertar dos hipervínculos a dos ficheros, contenidos en la carpeta documentos dentro de la carpeta pagina_lb, lb_biografia.doc y lb_biografia.pdf , que contienen la biografia de Luis Buñuel en formato word y formato pdf respectivamente. Estos hipervínculos se asociaran a las imágenes contenidas en la primera celda de la tabla. Ambos hipervínculos tendran una nueva ventana como marco de destino. Para realizar estos hipervínculos hay que realizar los mismo que hemos hecho con el tipo de hipervínculos anteriores:

q Seleccionar el objeto que permite el hipervínculo q Acceder a la opción del menu Insertar --> Hipervínculo q Activar Archivo o página web existente q Seleccionar el fichero, en la ventana que aparece, con el que se quiera enlazar.

Por último, la imagén de la celda mas a la derecha debe proporcionar el hipervínculo a la página anterior (por_bun)

IES LUIS BUÑUEL – Seminario páginas web P07 – Lo último de hipervínculos


Práctica 6 – Lo último de hipervínculos En las prácticas anteriores hemos ido realizando hipervínculos desde elementos contenidos en una página web a distintos “sitios” : páginas en Internet, páginas locales, marcadores dentro de la propia página y ficheros locales. Otro hipervínculo distinto a los anteriores es el denominado de correo electrónico. Mediante este tipo de hipervínculo se permite a la persona que esta visualizando la página web, enviar un mensaje de correo electrónico a una dirección contenida en la propia página, y que normalmente esta asociada al creador o la referencia de la página. Por ejemplo, en la página web de un instituto sería conveniente incluir un hipervínculo de correo electrónico para permitir enviar un mensaje de correo a la dirección del instit uto. El primer paso es semejante a los anteriores tipos de hipervínculo, seleccionar el “objeto” que deseamos permita realizar el hipervínculo (normalmente será una imagen que de idea de correo : buzón, sobre, etc.). Luego accederemos a la opción del menú Insertar --> Hipervínculo, y seleccionaremos de la columna de la izquierda la opción de “Dirección de correo electrónico” y rellenaremos las casillas que aparecen (ver figura adjunta).

Si en una página web escribimos el texto correspondiente a una página web, o a una dirección de correo electrónico, FrontPage genera un hipervínculo automáticamente del tipo correspondiente:

http://www.educa.aragob.es/ieslbuza

[email protected]



Para terminar con los hipervínculos vamos a tratar los mapas de imagen. Hasta ahora, cuando hemos utilizado una imagen para crear hipervínculos lo hemos realizado generando un único hipervínculo por imagen, que se activaba al posicionar el cursor sobre ella y pinchar con el ratón. Mediante los mapas de imagen podemos dividir una imagen en varias zonas y asociar a cada una de ellas un hipervínculo distinto. Lo primero que hay que hacer es insertar la imagen, seleccionarla y acceder a la barra de herramientas específica para las imágenes

(Ver à Barras de Herramientas à Imágenes). En nuestro caso vamos a crear una página en blanco (p06.htm) en la que insertaremos la imagen idx_img_bio_lb.jpg contenida en la carpeta img_biografia contenida dentro de pagina_LB. Esta imagen es una representación en miniatura de las imágenes contenidas en dicha carpeta. El objetivo es asociar un hipervínculo a cada una de las “miniaturas” contenidas en la imagen, para que se enlacen con la propia imagen a tamaño real.

Ahora tenemos que definir las zonas activas de la imagen, para ello se deben utilizar las herramientas contenidas en la barra de herramientas : zona activa rectangular, zona activa circular y zona activa en forma de polígono.



Al diseñar las zonas activas con estas herramientas (pinchar, arrastrar y soltar) aparece el dialogo para concretar las propiedades del hipervínculo (en la figura se muestra el ejemplo para la primera imagen).

Para ver las zonas activas que posee una imagen se debe activar el botón correspondiente en la barra de herramientas de imágenes. Cada una de las zonas activas queda resaltada y pueden modificarse sus características activando en el menú contextual la opción de propiedades.

SEMINARIO PÁGINAS WEB - Aragonieslbuza.educa.aragon.es/.../curso_web/curso_web.pdf · web con la...

Documents

Transcript of SEMINARIO PÁGINAS WEB - Aragonieslbuza.educa.aragon.es/.../curso_web/curso_web.pdf · web con la...