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

Presentación del tema: "CONFECCIÓN DE PÁGINAS WEB CON MS FRONT PAGE - TICEQ 2006 - Prof: Dr. Carlos A. Núñez Dpto. Química Física, U.H"— Transcripción de la presentación:

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

2 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

3 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

4 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

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

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

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

8 Pantalla de trabajo de FP

9

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

11 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

12 Propiedades de la página: general

13 Propiedades de la página: fondo

14

15

16

17 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

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

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

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

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

22 Propiedades de las imágenes

23 Texto asociado a una imagen

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

25 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)

26 Imagen de fondo

27 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

28 Fondo lateral

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

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

31 Marcar elemento Hipervínculos: creación

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

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

34 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

35 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

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

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

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

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

40 ALGUNOS CONSEJOS PARA LA CONFECIÓN DE SITIOS WEB

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

42 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

43 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

44 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

45 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

46 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

47 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