Web con Frontpage

21
UBICACIÓN FRONTPAGE Podemos ubicarlo desde el botón INICIO situado, normalmente, en la esquina inferior izquierda de la pantalla. Al colocar el cursor y hacer clic sobre el botón INICIO se despliega un menú; al colocar el cursor sobre PROGRAMAS, aparece otra listas con los programas que hay instalados en el ordenador, debemos ubicar Microsoft FrontPage dentro de Microsoft Office, luego se hace clic en el y arranca el programa.

Transcript of Web con Frontpage

Page 1: Web con Frontpage

UBICACIÓN FRONTPAGE

Podemos ubicarlo desde el botón INICIO situado, normalmente, en la esquina inferior izquierda de la pantalla. Al colocar el cursor y hacer clic sobre el botón INICIO se despliega un menú; al colocar el cursor sobre PROGRAMAS, aparece otra listas con los programas que hay instalados en el ordenador, debemos ubicar Microsoft FrontPage dentro de Microsoft Office, luego se hace clic en el y arranca el programa.

Page 2: Web con Frontpage

TITULO EN FRONTPAGE

La barra de título contiene el nombre del programa (Microsoft FrontPage) y el nombre del fichero con el que estamos trabajando en este momento (pagina_nueva.htm). En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

Para que la página web sea visible por todo el mundo debemos limitarnos a fuentes de uso general, como Times New Roman, Arial, Comic Sans 0 Tahoma.

Page 3: Web con Frontpage

FONDO EN FRONTPAGE Para establecer el color de fondo de una página, nos situamos en la vista normal y allí seleccionamos Formato, Fondo o con el botón derecho del ratón en la página que estamos creando, activar Propiedades de página hasta llegar a la siguiente ventana:

En esta ventana podemos modificar diferentes aspectos de la página:•Colores de fondo, texto y de los hipervínculos.•Si queremos colocar una imagen como fondo de la web y si queremos añadirle una marca de agua, para que aparezca en el fondo de forma estática.

Page 4: Web con Frontpage

SONIDO DE FONDO EN FRONTPAGE Se dispone de tres métodos básicos para incluir sonido en las páginas

Web:•Incrustar Controles Tipo VCR: Permiten al usuario reproducir el sonido a voluntad. •Establecer un Sonido de Fondo: Permite reproducir el sonido automáticamente cuando se carga la pagina. • Crear un Enlace a un Archivo de Sonido: de forma que el usuario lo descarga y posteriormente un programa en el ordenador del usuario lo reproduce.

Para escuchar el sonido simplemente pulsamos el botón de reproducir.  Por defecto FrontPage va a reproducir automáticamente el sonido al cargar la página.  Si no queremos que esto sea así, habrá que modificar el código HTML en la línea donde figura el complemento.  Incluiremos autostart="false" en la etiqueta EMBED

Page 5: Web con Frontpage

MARGENES EN FRONTPAGE

En la mayoría de los sitios web hay una estructura general que se mantiene en todas las páginas del sitio. Una de las más frecuentes es que haya un margen superior con el logotipo del sitio web, un margen izquierdo con el menú principal, un margen derecho con anuncios publicitarios y un margen inferior con información legal, datos de contacto, etc. Si tuviéramos que poner todo esto en cada página que hacemos sería mucho trabajo. Para ello están los bordes compartidos. Se trata de márgenes que tendremos que rellenar sólo una vez y aparecerán en todas las páginas que hagamos.

Para hacer los bordes compartidos abrimos la página principal (index.htm, default.htm o home.htm) y vamos al menú Formato > Bordes compartidos. Nos saldrá la siguiente ventana:

Page 6: Web con Frontpage

GUARDAR UNA PAGINA EN EL DISCO DURO EN FRONTPAGE

La barra de herramientas contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Guardar, Abrir , Imprimir , etc. Pulsamos en el icono Guardar . Al ser la primera vez que guardamos, el sistema nos pedirá un nombre para el archivo, y nos sugerirá uno. Los nombres de páginas web suelen terminar en .htm o .html. Sin embargo, no es necesario escribir esta terminación si no queremos. FrontPage lo añadirá automáticamente.

En la pantalla podemos ver como el sistema nos sugiere index.htm Hacemos clic en index.htm, lo borramos y escribimos como nombre 'hola.htm' (sin las comillas). Hacemos clic en Aceptar y el ordenador guardará nuestro trabajo

Formatos de texto e imágenesPara añadir texto a una página, simplemente hay que abrirla y comenzar a teclear en la vista página, o bien copiar y pegar un texto de archivo de texto.  El funcionamiento es exactamente igual que el de un procesador de textos.Los párrafos en HTML tienen una diferencia con los párrafos en documentos de texto y es que no son la unidad estándar de formato sino que se trata de una unidad visual de elementos separados en una página, donde estos elementos son texto, imágenes o cualquier cosa.En la vista página la inserción de un salto de párrafo se consigue pulsando Intro.  En cambio, si lo que queremos es un salto de línea lo haremos a través del menú Insertar, Salto de línea o con la combinación de teclas Mayús + Intro.  Cuando queremos hacer un salto de línea nos aparece la siguiente ventana para configurarlo

Page 7: Web con Frontpage

Formatos de texto Para añadir texto a una página, simplemente hay que abrirla y comenzar a teclear en la vista página, o bien copiar y pegar un texto de archivo de texto.  El funcionamiento es exactamente igual que el de un procesador de textos.Los párrafos en HTML tienen una diferencia con los párrafos en documentos de texto y es que no son la unidad estándar de formato sino que se trata de una unidad visual de elementos separados en una página, donde estos elementos son texto, imágenes o cualquier cosa.En la vista página la inserción de un salto de párrafo se consigue pulsando Intro.  En cambio, si lo que queremos es un salto de línea lo haremos a través del menú Insertar, Salto de línea o con la combinación de teclas Mayús + Intro.  Cuando queremos hacer un salto de línea nos aparece la siguiente ventana para configurarlo

Page 8: Web con Frontpage

Formato de textoModificar el formato de texto se hace de forma similar a un procesador de textos.  A partir de la barra de herramientas Formato podemos modificar el tipo y tamaño de la fuente, ponerla en negrita, cursiva o subrayado, cambiar el color o el relleno de la fuente .

Alineación de párrafosPor defecto se alinean con el borde izquierdo de la ventana, pero se puede cambiar su alineación a través de los botones de la barra de

herramientas.Alineación derecha - centrada - izquierda - justificada

Page 9: Web con Frontpage

LISTASUna forma sencilla de organizar la información de la página es ir insertando listas. Existen varios tipos:• Lista con Viñetas: Presenta una lista de elementos sin ordenar.

Generalmente, los exploradores de Web representan las listas con viñetas como párrafos separados por espacios en blanco, precedidas por un símbolo.

• Listas Numeradas: Presenta una lista ordenada de elementos, como por ejemplo, los pasos de un procedimiento. Generalmente, los exploradores de Web representan las listas numeradas como párrafos separados por espacios en blanco, precedidos de números.

• Listas de Definición: Presenta términos y sus definiciones. Generalmente, los términos se sitúan alineados a la izquierda. El formato exacto de la lista depende del navegador utilizado. Muchos navegadores ignoran el estilo de Lista de directorios.

• Lista de Directorios: Muestra una secuencia de términos cortos.• Lista de Menú: Presenta una lista desordenada de texto breve.

Page 10: Web con Frontpage

MARQUESINAS

La marquesina es una región de una página HTML que muestra un mensaje de texto con desplazamiento horizontal. Las marquesinas resultan útiles para llamar la atención del usuario sobre una línea de texto, como un titular o un anuncio importante.Para incluir una marquesina en la página, hay que señalar Elementos activos del menú Insertar y después hacer clic en Marquesina.Aparecerá el cuadro de diálogo Propiedades de marquesina:En el cuadro Texto, se escribe la línea de texto que debe

mostrar la marquesina. Si se seleccionó texto de la página en el paso uno, el cuadro Texto contendrá el texto seleccionado.Se pueden ajustar los valores de dirección, velocidad de movimiento, comportamiento, alineación, tamaño, repeticiones y color de fondo.

Desplazar: Esta opción, hace que el texto de la marquesina se desplace continuamente por la pantalla en la dirección que se especifique.Deslizar: Esta opción hace que el texto de la marquesina se deslice en la pantalla desde la dirección de inicio hasta el borde opuesto de la ventana. Cuando se llega al final de la región definida de la marquesina, el texto de la marquesina permanece en la pantalla.Alternar: Esta opción hace que el texto de la marquesina vaya hacia delante y hacia atrás desde la dirección de inicio hasta el borde opuesto de la ventana. El texto de la marquesina permanece siempre en la pantalla.

Page 11: Web con Frontpage

IMÁGENES

En una página podemos insertar imágenes en cualquier lugar, pudiendo incluir en ellas hipervínculos a otra página o a una dirección web o cuenta de correo electrónico.  En FrontPage para incluir una imagen lo podemos hacer de dos formas:

En el menú Insertar, Imagen podemos seleccionar una imagen prediseñada de FrontPage o una imagen que contenga nuestro disco duro. Nos aparecen las siguientes ventanas:Imágenes Prediseñadas

El funcionamiento de las imágenes prediseñadas es idéntico que con Word o Excel.

Page 12: Web con Frontpage

Imágenes del disco duroIMAGENES

Seleccionamos en la carpeta donde guardamos las imágenes aquella que queremos incluir en la página.

Una vez que hemos insertado una imagen podemos cambiar sus propiedades haciendo clic con el botón derecho en la imagen y seleccionando la opción Propiedades de Página aparece el siguiente cuadro de diálogo:

Page 13: Web con Frontpage

HipervínculosLos hipervínculos o enlaces o links son los elementos que diferencian la web de otros medios. Un hipervínculo supone enlazar la página web que estamos visualizando con otra página web, otra sección de la misma página, con un archivo, un servidor FTP, un archivo o una aplicación para descargar, una secuencia de sonido, vídeo o multimedia, una dirección de correo o un grupo de noticias.ENLACES INTERNOS EN EL MISMO

ARCHIVO HTMLPodemos crear los hipervínculos a partir de texto e imágenes, de forma que pulsando en ellos nos lleve a otra parte de la misma página, a otro archivo o página de nuestro sitio web o a una dirección URL. Para ello seleccionamos el texto o la imagen y pulsamos Insertar, Hipervínculo.Nos aparecerá la ventana siguiente:

Page 14: Web con Frontpage

ENLACES INTERNOS A OTRO ARCHIVO DE LA MISMA PAGINA WEB

Los enlaces dentro del mismo documento permiten a los visitantes Igualmente es conveniente crear otro enlace para volver a la parte superior.  A las partes del documento con la que queremos enlazar se le denomina marcador.  El procedimiento para crearlo es el siguiente:En la barra de menú, seleccionar Insertar, Marcador en aquel lugar en el que queramos situarnos después de enlazar.

En esta ventana elegiremos el nombre del marcador y pulsamos Aceptar.  A medida que vayamos añadiendo marcadores en el documento se irán añadiendo en la lista "Otros marcadores" para que luego al crear el hipervínculo elijamos el que nos interese.

Page 15: Web con Frontpage

ENLACES INTERNOS A OTRO ARCHIVO DE LA MISMA PAGINA WEB

Una vez creado el marcador, es el momento de crear el enlace. Para ello, en la barra de menús seleccionamos Insertar, Hipervínculo y elegimos la opción "Lugar de este documento" de forma que nos aparecerán los marcadores creados en la página en cuestión para poder seleccionar aquel al que queremos enlazar

Page 16: Web con Frontpage

Crear EnlacesENLACE EXTERNO Se denomina enlace externo y lo que hacemos es enlazar con una página web, para ello debemos escribir la dirección completa URL, de la forma http://www.cuam.tec.ve/ (por ejemplo).  Si la dirección URL de la web a la que queremos enlazar es muy larga o es una sección concreta de un sitio web, podemos copiar y pegar la dirección URL desde la barra de direcciones del navegador.

Page 17: Web con Frontpage

EnlacesMODIFICAR UN ENLACE

• Seleccione el hipervínculo que desea cambiar.

• En el menú Insertar, haga clic en Hipervínculo.

• Haga los cambios que desee.

ELIMINAR UN ENLACE• Seleccione el texto o el objeto que

representa el hipervínculo que desea quitar.

• En la pestaña Inicio, en Insertar, haga clic en Texto y, a continuación, haga clic en Quitar hipervínculo. EJECUTAR UN ENLACE

• Seleccione el texto o el objeto que representa el hipervínculo que desea ejecutar.

• En la pestaña Inicio, en Insertar, haga clic en Texto y, a continuación, haga clic en Abrir hipervínculo.

Page 18: Web con Frontpage

FRAMESLos marcos (Frames) dividen la ventana de un explorador de Web en regiones separadas, cada una de las cuales puede mostrar una página separada, desplazable. Se llama página de marcos a un grupo de marcos. Una página de marcos es una página Web especial que define el tamaño y la ubicación de cada marco que contiene.

En las páginas de marcos más sencillas, hay dos marcos: un marco muestra una página con una lista de un conjunto de hipervínculos, y el otro marco muestra las páginas a las que apunta cada hipervínculo. Cada vez que un usuario hace clic en un hipervínculo del primer marco, la página a la que apunta ese hipervínculo se muestra en el segundo marco.La página de marcos propiamente dicha no contiene realmente ningún contenido o página; sólo contiene los hipervínculos a las páginas ya existentes que se muestran en los marcos.

Page 19: Web con Frontpage

CREACIÓN DE FORMULARIOS

Un formulario es un conjunto de campos de entrada donde el usuario introduce la información que precisamos y pulsa en un botón para que se envié al servidor.

Los formularios se utilizan en las webs para recoger información del visitante. Éste puede escribir libremente en los campos que se le presentan o seleccionar una opción de las que se le ofrecen.

Para crear un formulario la forma más sencilla es realizarlo utilizando alguna de las plantillas disponibles, también podemos crearlos insertando los distintos campos que nos hacen falta.

Para insertar campos de formularios se hace desde el menú Insertar del Editor de FrontPage o desde la barra de herramientas Formularios que se activa por el menú Ver -> Barra de herramientas Formulario.

Page 20: Web con Frontpage

Creación de mapas de imágenesUn mapa de imagen es una imagen que contiene enlaces. ¿En qué se diferencia de una imagen que es un enlace? Normalmente un mapa de imagen contiene al menos dos puntos activos o enlaces entre sus bordes, es decir dependiendo de donde hagamos clic en la imagen. Una aplicación interesante del mapeo de imágenes es un mapa de España dividido por provincias y en el que pulsando en cada provincia accedemos a la web de su Universidad. Lo podemos encontrar en la siguiente dirección http://www.ecomur.com/mapauniversidad.htm

¿Como creamos un mapa de imagen? En FrontPage seguiremos los siguientes pasos:Insertamos una imagen en la página web, siguiendo el procedimiento visto anteriormente.1. Debemos definir y tener muy claro cuáles van a ser las zonas activas de la

imagen.2. Hacemos clic en la imagen tras lo que aparece una barra de herramientas

en la parte inferior de la página.

Page 21: Web con Frontpage

En esta barra aparecen diferentes botones para alterar las propiedades de las imágenes. Para crear las zonas activas emplearemos tres botones, que nos permitirán dibujar figuras geométricas en la imagen: Crea una zona activa en forma rectangular

Crea una zona activa en forma de círculo o elipse

Creamos cualquier tipo de figura

Creamos cualquier tipo de figura

Para dibujar la imagen seleccionamos una de las tres opciones y arrastramos el ratón por la zona que se quiere convertir en zona activa. Cuando se libera el botón del ratón, aparece el cuadro de diálogo Crear hipervínculo, en el que especificaremos el destino para la zona activa que se acaba de definir.

Creación de mapas de imágenes