UNIVERSIDAD PABLO DE OLAVIDE DE SEVILLA

DISEÑO Y ELABORACIÓN DE PÁGINAS WEB

PROFESOR: ENRIQUE LEIVA MORÓN

EL CONTENIDO DE ESTA PÁGINA WEB LO PUEDEN ENCONTRAR EN LA SIGUIENTE URL:

www.profesorleivafrontpage.comlu.com

REQUISITOS DEL SITIO WEB (CURSO 2009-2010)

    Este apartado se evaluará para los alumnos que sigan el plan de calidad mediante la exposición en clase de un Sitio Web diseñados por cada alumno de forma individual según se os indica en el documento del plan de calidad que tenéis disponible en la Página Principal del WebCT de este curso.

    El alumno responderá a las preguntas que el profesor le haga respecto al diseño del Sitio Web.

    La elaboración y diseño del Sitio Web debe realizarse con Front-Page y en ningún caso se admitirá la utilización de otras aplicaciones.

    Los requisitos exigibles que debe contener el sitio web (nunca pagina Web individuales) serán los siguientes elementos, todos ellos impartidos en clase:

1. Adición de Texto en una Web

2. Párrafo, Estilos, Numeración y Viñetas

3. Inserción de imágenes

   • Prediseñadas

   • Desde archivo

4. Alineación respecto al texto

5. Hipervínculos

   • En Texto

   • En Imagen

   • En correo Electrónico

6. Tablas

   • Combinar, Dividir Celdas

   • Formato de Tabla

7.  Componentes Web

   • Marquesinas

   • Botones Interactivos

8. Efectos DHTML

9. Marcadores

10. Efectos de transición de página

11. Inserción de música de fondo

12. Publicación del sitio Web
     

    El profesorado NO facilitará el programa de Front Page bajo ningún concepto, ya que es un programa con licencia. Se pueden utilizar las aulas de acceso libre para el desarrollo del trabajo si así lo desean los alumnos.

INTRODUCCIÓN.

ADICION DE TEXTO EN UNA WEB

• EDICIÓN

  • COPIAR

  • COPIAR FORMATO

  • CORTAR

  • PEGAR

• FORMATO

  • PÁRRAFOS

  • ESTILOS

  • NUMERACIÓN Y VIÑETAS

  • TEMA (Formato/Tema)

  • FONDO (Formato/Fondo)

INSERCIÓN DE IMAGENES: Prediseñadas o desde Archivo. Los formatos .jpg ó .gif serán los más usados y aconsejables por ocupar poca memoria.

Para tener a la vista todas las herramientas acerca de imágenes podemos buscarla en

Ver/Barra de Herramientas/Imágenes

Realizamos marca de agua con el logo de la UPO.

Esta imagen la podemos guardar directamente desde la Web de la UPO, o bien imprimir pantalla y recortar en un editor de imágenes , como el Paint.

ALINEACIÓN: Se puede alinear tanto a la derecha, izquierda o el centro (como es el caso anterior)

       Logo alineado a la izquierda

                                                                                                                                                                                                                Logo alineado a la derecha

HIPERVÍNCULOS:

    Es lo que nos permite establecer saltos de una página a otra. El proceso es sencillo, se selecciona con el ratón el trozo de texto o imagen que queremos que salte y pulsamos el icono de hipervínculo correspondiente.

1.     DESDE TEXTO: CREAREMOS UN HIPERVÍNCULO QUE NOS LLEVE A LA PÁGINA WEB DE LA UPO. EL RESULTADO SERÍA EL SIGUIENTE:

   IR A LA PÁGINA WEB DE LA UNIVERSIDAD PABLO DE OLAVIDE

    

2.     DESDE IMAGEN: LO MISMO PERO PINCHANDO EN LA IMAGEN. (INSERTAMOS EL ESCUDO DE LA UPO, ALINEAMOS EN EL CENTRO, LO SELECCIONAMOS CON EL RATÓN E INSERTAMOS EL CORRESPONDIENTE HIPERVÍNCULO)

   3.       HIPERVÍNCULO PARA ENVIAR UN E-MAIL: (se debe tener instalado el Outlook Express).

                Pinche aquí para mandar un correo electrónico

   4.       HIPERVÍNCULO A UNA URL EXTERNA: POR DEFECTO YA SE CREAN DANDOLE A INTRO AL FINAL.

                        EJEMPLO: IR A LA PÁGINA: www.expansion.com

   5.       HIPERVÍNCULO A OTRA PÁGINA DENTRO DE ESTE WEB SITE: para ello guardamos el contenido de esta página como index.htm y  creamos otra página nueva que llamaremos Titulaciones.htm En esta nueva página escribiremos el nombre de 3 titulaciones cualquiera.

        Grado en administración de empresas

        Grado en derecho

        Grado en finanzas y contabilidad 

Lo que haremos será crear un hipervínculo a la web de titulaciones.htm desde el texto siguiente:

Pinche aquí para conocer otras titulaciones de la UPO.

ZONAS ACTIVAS: Si quisiéramos definir la zona activa en la imagen es tan sencillo como elegir la herramienta rectángulo, circulo o polígono de la barra de herramientas de imágenes. En cualquier caso deberá ser una forma cerrada. una vez dibujada la forma en la imagen, aparecerá el cuadro de diálogo donde se define el hipervínculo. Debemos indicar dónde se desplazará al pulsar en dicha zona.

ver/barra de herramientas/imágenes/ y nos llevamos un polígono a la zona de la imagen.

MARCADORES:

Se insertarán unos marcadores en las titulaciones anteriores. Se trata de pinchar en los nombres de las titulaciones y Saltar hasta donde esté el marcador o ancla. Hagamos lo siguiente:

Escribimos las titulaciones, luego, insertamos las anclas o marcadores donde indiquemos, y por último realizamos los hipervínculos a dichos marcadores desde dichas titulaciones. Observe el resultado. 

Grado en administración de empresas (Ancla o marcador 10 espacios abajo)

Grado en derecho ( Ancla o marcador 20 espacios abajo)

Grado en finanzas y contabilidad ( Ancla o marcador 30 espacios abajo)

Nota: para insertar anclas o marcadores; Insertar/Marcador 

Marcador 1. Grado en Administración de Empresas

Marcador 2. Grado en Derecho

Marcador 3. Grado en Finanzas y Contabilidad 

TABLAS:

INSERTAR TABLAS: para ello ir a Tabla/Insertar/Tabla  y definir número de columnas, filas...

Pinchando dentro de la tabla con el botón derecho vamos a propiedades de la tabla. Aquí vemos el Diseño, Borde y Fondo de la tabla. (Color de Fondo, Bordes, Píxeles o Porcentajes...)

PROPIEDADES DE LA TABLA.

COMBINAR, DIVIDIR CELDAS.  

Ejemplos: Hechos en clase.

Producto 1
Producto 2

 TABLA HORARIOS

COMPONENTES WEB:

    MARQUESINA: Para insertar una marquesina vaya a Insertar/Componente web/Marquesina

Insertar/Componente Web/Marquesina

        BOTONES INTERACTIVOS: Insertar/componentes Web/botón activable

Se crea un boton que contiene un hipervínculo a otra página o lugar dentro de la misma. Al pasar el mouse por encima puede cambiar de color, mostrar una imagen o reproducir un efecto de sonido.

Ejemplos:

Botón que vaya al inicio de la página actual.

Botón que vaya a la página Titulaciones.htm

Botón que vaya al marcador1

Notas de botones interactivos:

• Texto Botón (texto que va a llevar el botón, determinar las dimensiones de ANCHO Y ALTO)
• Color del Botón
• Efecto del botón cuando el mouse pase por encima
• Personalizado (Personalizar efecto ratón, puede insertar música, video, etc)

EFECTOS DHTML: para crear efectos dhtml hay que tener visible la barra de dhtml. Para ello, se pulsa con el botón derecho sobre cualquiera de las barras de herramientas y seleccionamos efectos DHTML. mostrando la siguiente barra:

Ahora sólo queda seleccionar un trozo de texto o imagen y "elegir evento".. Como ejemplo haremos que cuando pasemos por una imagen cambie a otra.

CAMBIO DE ESCUDO A LOGO          

PAGINAS CON MARCOS

Se suelen usar para el diseño de páginas por su gran utilidad y organización.

Archivo/Nuevo/Página de Marcos

BOTONES PARA DESPLAZARSE:

BOTON ATRÁS: Vuelve a la página anterior, si la hubo.

Para crear un botón Atrás, hacemos clic en el lugar dónde queremos que esté el botón. Entonces hacemos clic en la vista HTML para ver el código y, en el lugar dónde se encuentre el cursor, añadimos esto:

<FORM><INPUT TYPE="button" VALUE="Atrás" onClick="history.back()"></FORM>

BOTON SIGUIENTE: Vuelve a la página de la que volvemos, si la hubiese.

Si lo que queremos es un botón Siguiente, hacemos lo mismo con:

<FORM><INPUT TYPE="button" VALUE="Adelante" onClick="history.forward()"></FORM>

INSERCIÓN DE MÚSICA DE FONDO.

Sólamente admite formatos wav, midi, au, real audio y aiff

Para ello pinchar el boton derecho en cualquier parte de la pagina web e ir a Propiedades de la página/General/Sonido de Fondo

bucle; repetir eternamente, una sóla vez...etc

Como ejemplo en esta página : Eric Clapton - I Shot the Sherriff.wav

HOSPEDAJE GRATUITO EN UN FREEHOSTING.  Podrá seguir estos enlaces que le ayudarán para completar su publicación.

• Publicar a través de programas FTP (protocolo de transferencia de ficheros).
• Ejemplo. Indicaciones varias para publicar a través de Miarroba.com
• Otros.