Crear una web docente departamental |
con FrontPage (2000) |
1. Definir un sitio web |
 Crear sitio web vacío (no página). Archivo > Nuevo > Web  |
| En la siguiente ventana (Nuevo, Sitios web) elegimos Web de una página. En opciones especificamos su ubicación: Mis documentos/Fulanit@ |
| El editor crea automáticamente el archivo index.htm y las carpetas images (para almacenar las imágenes) y _private, (control interno del editor) |
| En Lista de Carpetas aparece la estructura del sitio creado. |
Ahora guardamos el sitio web creado y cerramos FP. Podemos comprobar que el sitio ha sido creado en Mis documentos. |
| |
2. Primera página web |
| Editar la primera página |
 Desde FP Archivo > AbrirWeb buscamos nuestra "Fulanit@" y la abrimos. 
Recuerda la diferencia entre sitio web (o Web) y página web. |
| En Index creamos una página de bienvenida similar a esta. |
| Primero desde Tabla insertamos una tabla de 3 filas x 2 columnas. Con ancho de 100 %, tamaño de borde 1, margen y espaciado de celdas 0. |
| Con el botón derecho obtenemos las principales comandos para manejar tablas: Propiedades de celda y tabla. Combinar, Dividir, Insertar, Eliminar, Fuente,... |
Al final del área de trabajo hay tres pestañas. Normal/HTML/Vista previa.
(vistaNormal) (vistaHTML) (vistaPrevia)
Pero la vista real (en Internet) la tenemos desde "Archivo > Vista previa en el explorador"
 Actividad: Visitamos el código fuente de la página de bienvenida (Pestaña HTML de final de página, izda). Después ver la página desde la Pestaña Vista previa. |
| Actividad: Ya tenemos nuestra primera página de bienvenida. Ahora ¿todos los elementos introducidos en la página son internos o externos? Recuerda: elementos |
| Actividad: Enumera el número de hipervínculos de la siguiente página web (ten en cuenta que alguno está duplicado): (http://www.educaragon.org/index.asp). |
| Esta primera página es muy simple. Para diseñar páginas web más complejas recuerda las orientaciones metodológicas sobre páginas web. |
| Si quieres añadir más páginas a tu sitio web recuerda antes las orientaciones metodológicas respecto a la estructura y navegación de un sitio web. |
| Una buena excusa para iniciar una página web es diseñar un periódico digital con el alumnado. |
| |
3. Escritorio y área de trabajo |
 Desde Ver podemos activar las principales paletas (o barras) y ventanas. Siempre tendremos activas la Barra de vistas y la Lista de carpetas.
Actividad: Para saber qué ofrece cada opción activa y desactiva desde Ver estas dos paletas. |
| Desde Ver > Barra de Herramientas podemos activar las barras de herramientas. Resultan casi imprescindibles la Estándar y la de Formato. |
| Paleta Estándar. Comprende las opciones básicas de nuevo, abrir, copiar, imprimir, ..., también insertar componentes, tablas, imágenes, tablas, e hipervínculos. |
| Paleta Formato (de texto). Fuente, tamaño, estilo, alineación, viñetas, sangrías, bordes, ... |
| Otras paletas que necesitaremos en algún momento de la edición de páginas web son: Efectos DHTML, Estilo, Exploración, Imágenes, Informes, Tablas, Ubicación. |
| Con el botón derecho, en vista Normal, podemos acceder a las propiedades de página para modificar los principales elementos que la componen. |
| Propiedades de página Ejemplos: (http://www.fuentetajaliteraria.com/) (http://www.matesazara.com/) |
| General (ubicación, título, sonido, plataforma). Fondo (imagen, efectos de conversión vínculos). Márgenes (podríamos quitar márgenes, marcar 0). Personalizado (variables de sistema y usuario). Idioma (idioma y codificación) y Grupo de trabajo. |
| |
4. Volviendo a nuestra primera página |
Insertar tablas y celdas Antes conviene leer el breve texto sobre tablas.
Actividad: Inserta una tabla de 10x1 sin borde en la parte izquierda de la página de bienvenida para colocar el menú principal. |
Escribiendo texto (tipografías html)
Actividad: Seguimos en la página de bienvenida. Escribe los elementos del menú principal que nos servirán para navegar desde nuestra página principal.
En la tabla creada escribe por este orden en distintas celdas (por ejemplo): Componentes, Programación, Asignaturas, Actividades, Bibliografía, Temas, Noticias, Enlaces. |
Insertar colores en página, tabla, celda, texto, ... (colores html)
Los Programas de tratamiento del color, nos proporcionan los colores amigables y los códigos correspondientes para incluirlos en el editor (códigos hexadecimales) Uno de estos programas, ColorSchemer, también permite el trabajo de colores desde Internet: http://www.colorschemer.com/online.html.
Una opción muy interesante es la selección de un color de pantalla mediante el "gotero" desde Propiedades de pagina > Fondo > Mas colores. |
Insertar imagen desde ... (gráficos e imágenes html)
Actividad: Buscar recursos gráficos en Internet desde páginas o portales concretos de internet o desde algún buscador como google. Y cargar los recursos en la carpeta ya creada (Images) de nuestro sitio web inicial, "Fulanit@".
Actividad: En la última celda de la tabla de menús colocar un icono de carta o email. |
Insertar imagen de sustitución.
Primero hay que preparar dos imágenes de tamaños parecidos o iguales y que tenga cierto sentido sustituir una por otra al pasar el ratón. (ejemplo1) (ejemplo2) |
Actividad: Desde CoolArchive (http://www.coolarchive.com/index.cfm) nos fabricamos dos botones iguales con el texto (Componentes) de dos colores distintos, por ejemplo azul y magenta.
Los guardamos en Images.
Creamos una nueva página que la guardamos con el nombre de componentes.htm
En lugar del texto componentes insertamos la primera imagen (azul). Después a la imagen le asociamos Efectos DHTML (Formato > Efectos de DHTML dinámico); elegimos un evento (pasar el mouse); aplicamos un efecto (intercambiar imágenes) y una configuración (elegir imagen). Elegimos el botón magenta y guardamos y visualizamos con el navegador el efecto. |
Insertar > Componente ...
1.- Administrador de titulares
Sirve para intercambiar titulos, banner, imágenes preparadas con temporalizador y efectos de transición que podemos definir.
2.- Contador de visitas a la página.
No es muy fiable y puede fallar. Otra opción es buscar un contador de estadíaticas externo (ejemplo)
2.- Botón activable.
Sirve para formar menús o acceso a otras páginas sustituyendo al hipervínculo simple:
Se puede elegir propiedades de texto, vínculo o enlace, colores, efecto, ancho, alto, ... (ejemplo)
4.- Marquesina.
Sirve para mostrar un mensaje de texto con desplazamiento horizontal dentro de un cuadro que podemos definir.
|
Para entrar de lleno en el estudio de los hipervínculos y todas sus posibilidades
conviene recordar lo inicial sobre hipertexto y las orientaciones metodológicas sobre enlaces.
Además de aclarar algunas cuestiones generales sobre los Hipervínculos,
deberíamos tener unas nociones generales del código fuente
de nuestros documentos html, es decir una pequeña Introducción al html. Y |
