Objetivos: Creación de una página web. Zona de edición. Creación mediante plantilla:

Objetivos:

1.

1. Aprender a manejar la herramienta Aprender a manejar la herramienta FrontPage

FrontPage

2.

2. Adquirir un dominio práctico Adquirir un dominio práctico 3.

3. Conocer las principales características Conocer las principales características que componen una página web y su

que componen una página web y su

realización

realización

Entorno FrontPage - Diap. 1

Ventana Principal . Entorno FrontPage - Diap. 2

Barra de menú Barras de herramientas Barra de estado

Zona de edición

Título de la página Botones de ventana Modo de trabajo Iconos de vistas

Entorno FrontPage - Diap. 3

Creación de una página web

•Creación mediante plantilla:

–La plantilla determina el formato, aspecto y elementos de la página que se genera.

–Posteriormente se modifican, eliminan o añaden elementos.

–Hay plantillas que solicitan información al usuario mediante un “asistente”

•Ejercicio práctico:

Realiza una página web con la plantilla “Preguntas más frecuentes”.

Pon el siguiente texto como título:

“LAS RESPUESTAS A TUS PREGUNTAS” Al menos modifica dos preguntas y sus contestaciones

Creación de una página web

Entorno FrontPage - Diap. 5

Creación sin plantilla:

Se genera una página en blanco y el usuario debe añadir todos los elementos que necesite.

Barra de herramientas: botón nuevo

Menú: Archivo -> Nuevo y seleccionar “página normal” del cuadro de dialogo.

Creación de una página web

Entorno FrontPage - Diap. 6

Guardar la página en un fichero:

Archivo->Guardar Archivo->Guardar como..

Abrir una página existente:

Archivo->Abrir..

Taller de elaboración de páginas web Entorno FrontPage - Diap. 7

Ejercicio práctico:

–Guarda la página en un fichero –Visualiza la página con un navegador –Elimina el resto de preguntas y vuelve a visualizarlo.

Creación de una página web

Taller de elaboración de páginas web Entorno FrontPage - Diap. 8

Formato del texto

Menú Formato:

Formato->Fuente..

Taller de elaboración de páginas web Entorno FrontPage - Diap. 9

Formato->Párrafo:

Establece propiedades del párrafo (Encabezado1, Encabezado2, ...) y alineación (izquierda, justificada, etc.)

Formato del texto

REALIZA EL SIGUIENTE EJERCICIO Fuente Courier, tamaño 12

El título: encabezado 1

Párrafo1: negrita cursiva, espaciado de párrafo 20 (antes y después) y sangría 1ª línea 10

Párrafo2: Arial Narrow

Taller de elaboración de páginas web Entorno FrontPage - Diap. 11

Menú:

Archivo-> propiedades

Diseño del fondo

Taller de elaboración de páginas web Entorno FrontPage - Diap. 12

EJEMPLO: Título

Pon un sonido de fondo que suene dos veces cuando se carga la página

Pon una imagen de fondo con una marca de agua Color del texto en azul y el del hipervínculo a verde

Taller de elaboración de páginas web Entorno FrontPage - Diap. 13

Formato -> Numeración

y viñetas

Establece propiedades de la numeración de párrafos y viñetas.

Formato del texto

Taller de elaboración de páginas web Entorno FrontPage - Diap. 14

1. Realiza una página web que muestre tu currículum. Como mínimo debe contener: • El título en Intermitente y de color azul • Una lista de viñetas

• Una lista enumerada

• Varias líneas horizontales separando secciones

2. Visualiza la página mediante un

navegador

Realización de un ejercicio práctico:

Taller de elaboración de páginas web Entorno FrontPage - Diap. 15

•Asocia a una zona de la página un

identificador

•Determinar zona que se quiere marcar

•Asignarle un identificador

•Menú:

Archivo-> propiedades

Relaciona

- descripción de nueva información - nueva información

Hipervínculo

• Menú: Insertar -> Hipervínculo... • Modificar: Propiedades del menú contextual

Taller de elaboración de páginas web Entorno FrontPage - Diap. 17

Menú:

Insertar->Componente->Marquesina...

Marquesina

Taller de elaboración de páginas web Entorno FrontPage - Diap. 18

Menú:

•Insertar->componente->Contador de visitas... •Solo se visualiza a través de un servidor

Taller de elaboración de páginas web Entorno FrontPage - Diap. 19

Añade a tu página currículum:

•Un texto de bienvenida en rojo y desplazándose con tamaño de 24 ptos.

• Enlaces a las secciones de títulos, trabajos y contacto.

•Enlaza a la URJC

•Enlaza al fichero “avion.jpg”

•En la sección de contacto, un enlace para escribir un correo.

Realización ejercicio práctico:

Taller de elaboración de páginas web Entorno FrontPage - Diap. 20

• Para insertar una imagen en la página:

1. Mediante el portapapeles de windows

2. Menú:

Insertar->imagen

1. Desde un archivo 2. Prediseñadas

• Acepta varios formatos: GIF, JPEG, BMP, TIFF.... • La barra de herramientas de imágenes:

Imágenes

Taller de elaboración de páginas web Entorno FrontPage - Diap. 21

• Herramientas más importantes:

• Insertar texto

• Girar

• Contraste y brillo

• Recortar

• Establecer zonas activas:

• Rectangular

Imágenes

• Insertar una imagen desde un fichero una URL.

Menú:

Insertar->imagen-> Desde un archivo

Taller de elaboración de páginas web Entorno FrontPage - Diap. 23

Imágenes

• Propiedades de la imagen: Menú contextual botón de la derecha • Alternativas si no visualiza el navegador • Crear hipervínculo

Taller de elaboración de páginas web Entorno FrontPage - Diap. 24

Añade a tu página currículum: •Un hipervínculo a una nueva página. •En esta nueva página inserta la imagen “salamanc.jpg”

•Establece sobre el paisaje de esta imagen al menos tres zonas activas (dos de ellas pueden ser):

•www.turismed.com/salamanca/ruta.htm