CONFECCIÓN DE PÁGINAS WEB CON MS FRONT PAGE - TICEQ Prof: Dr. Carlos A. Núñez Dpto. Química Física, U.H

Los ejemplos, asociados a los iconos: solo pueden consultarse si se trabaja con conexión a la Intranet de la Facultad de Química o a Internet NOTA

Texto e Hipertexto Texto común: para imprimir y leer linealmente Hipertexto: para leer en pantalla Hipervínculo Hipervínculo Cada lector una secuencia diferente Cada lector una secuencia diferente

Página y Sitio Web Página web: documento de hipertexto (consulta on-line) Sitio web: Conjunto de páginas web relacionadas mediante hipervínculos

HTML HTML: Hipertexto Markup Languaje: Confección de páginas web Texto no formateado (txt) + etiquetas (tags) CÓDIGO FUENTE (.txt) NAVEGADOR (.htm)

MS-FrontPage Confección de páginas web: Mediante el “código fuente” Programa “wysiwyg” (what you see is what you get) MS FrontPage

Subdirectorio de trabajo ANTES de comenzar el trabajo: Crear subdirectorio de trabajo y situar en él TODOS los materiales de trabajo ordenadamente

Pantalla de trabajo de FP

Normal: edición HTML: código fuente Vista previa: como en “navegador” Vistas de FP

Guardado de la página Nombres de archivo permitidos (Linux) (Linux) Sólo se letras del alfabeto inglés No espacios( _ ), acentos, signos de puntuación (Se recomienda) Solo minúsculas (Se recomienda) Solo minúsculas TÍTULO: Cualquier carácter

Propiedades de la página: general

Propiedades de la página: fondo

Uniformidad Color e imagen de fondo Colores para el texto e hipervínculos Banners Hipervínculos de navegación Tablas en blanco para el formateo Elementos comunes Plantilla del sitio

Tamaño de fuentes particular en HTML No subrayado: hipervínculos Probar con diferentes tamaños en navegador Fuentes

Exposición ordenada de datos Formateo de la página: Tablas invisibles Tablas

En el texto Fondo de página o tabla Con hipervínculo asociado Imágenes

GIF: Pocos colores Animadas Transparencias JPEG: Medios tonos BMP: Muy grandes Formato de las imágenes

Propiedades de las imágenes

Texto asociado a una imagen

Aparece al picar sobre imagen: Transparencias: Mapas de imagen: Barra de herramientas de imagen

Imágenes grandes demoran descarga de página No.BMP Réplica pequeña de imagen grande con hipervínculo (Thumbnail) Imágenes reducidas (Thumbnails)

Imagen de fondo

Imagen grande o pequeña que se repite Color de fuente: buen contraste con imagen de fondo Dar color al fondo semejante al de imagen de fondo Imagen de fondo

Fondo lateral

Saltos de una página a (un punto dado de) otra Asociables a figuras o textos Destino: archivo de cualquier formato Hipervínculos

Texto: Subrayado Colores particulares según estado Figuras: Si borde, igual color que hipervínculo de texto Cursor: Mano Hipervínculos: apariencia

Marcar elemento Hipervínculos: creación

Ventana destino del hipervínculo Hipervínculos: creación

Ventana destino del hipervínculo Hipervínculos: creación

Desde FrontPage: Vista normal de FP: Picando sobre él + Ctrl Vista previa de FP: Picando sobre él Desde navegador en: Su PCOtra PCServidor Hipervínculos: comprobación

Señal que permite acceder directamente a un punto dado de documento mediante un hipervínculo Modo normal (edición) de FP: Icono Texto subrayado Invisible en “Vista previa de FP y en NavegadorMarcadores

Marcar sitio + opción "Insertar/Marcador" Marcadores: inserción

Mismo documento: #marcador O … Hipervínculo a marcador

Otro documento: dirección + marcador Hipervínculo a marcador

Mediante bpt+on “Dirección de correo electrónico” Hipervínculo a

ALGUNOS CONSEJOS PARA LA CONFECIÓN DE SITIOS WEB

GENERALES Contenido y apriencia Diseño previo del sitio Todo en directorio de trabajo Uniformidad (plantilla)

DISEÑO DEL SITIO Primera página: Objetivo y contenido Vínculo a diferentes partes, al mapa o índice del sitio y a la página personal o dirección de correo electrónico del autor. Titulo adecuado a cada página

DISEÑO DEL SITIO Estructura: Hipervínculos “de navegación”: anterior, siguiente, mapa del sitio No necesario volver siempre a página principal Hipervínculos de navegación en lugares fijos

DISEÑO DEL SITIO Estructura: Para leer en la pantalla: no largas 3 o 4 pantallas 3 o 4 pantallas Versión para imprimir (.doc o.pdf) Diseño visible en monitores 640x480: figuras y tablas de ancho < 620 pixels

IMÁGENES Y TABLAS Tener en cuenta tamaño de pantalla Verificar que se observen detalles Precaución con figuras digitalizadas o copiadas de Internet y cambiadas de tamaño: pérdida de detalles  corrección

HIPERVÍNCULOS Asociado a un texto: Indicación clara del destino Asociado a una figura: Indicación del destino mediante mediante texto asociado a figura

REVISIÓN FINAL Redacción y ortografía Extensión de páginas Hipervínculos "rotos": En su PC, en otra PC y en servidor Diferentes tamaños de texto en navegador Diferentes navegadores