CONFECCIÓN DE PÁGINAS CONFECCIÓN DE PÁGINAS WEB CON WEB CON
MS FRONT PAGEMS FRONT PAGE
- TICEQ 2006 -- TICEQ 2006 -
Prof: Dr. Carlos A. NúñezProf: Dr. Carlos A. NúñezDpto. Química Física, U.HDpto. Química Física, U.H
[email protected]@fq.uh.cu
Los ejemplos, asociados a los iconos:Los ejemplos, asociados a los iconos:
solo pueden consultarse si se trabaja solo pueden consultarse si se trabaja con conexión a la Intranet de la con conexión a la Intranet de la Facultad de Química o a InternetFacultad de Química o a Internet
NOTA
Texto e HipertextoTexto e Hipertexto
Texto común: para imprimir y leer Texto común: para imprimir y leer linealmentelinealmente
• Hipertexto: para leer en pantallaHipertexto: para leer en pantalla• HipervínculoHipervínculo• Cada lector una secuencia Cada lector una secuencia diferentediferente
Página y Sitio WebPágina y Sitio Web
Página web: documento de hipertexto Página web: documento de hipertexto (consulta on-line) (consulta on-line)
Sitio web: Conjunto de páginas web Sitio web: Conjunto de páginas web relacionadas mediante relacionadas mediante hipervínculos hipervínculos
HTMLHTML
HTML: HTML: HHiperiperttexto exto MMarkup arkup LLanguaje: anguaje: Confección de páginas web Confección de páginas web
Texto no formateado (txt) + etiquetas Texto no formateado (txt) + etiquetas (tags)(tags)
CÓDIGO FUENTE (.txt)CÓDIGO FUENTE (.txt)
NAVEGADOR (.htm)NAVEGADOR (.htm)
MS-FrontPageMS-FrontPage
Confección de páginas web:Confección de páginas web:
Mediante el “código fuente”Mediante el “código fuente”
Programa “wysiwyg” (Programa “wysiwyg” (wwhat hat yyou ou sseeee iis s wwhat hat yyou ou gget) et)
MS FrontPage MS FrontPage
Subdirectorio de trabajoSubdirectorio de trabajo
ANTESANTES de comenzar el trabajo: de comenzar el trabajo:
Crear subdirectorio de trabajo yCrear subdirectorio de trabajo y
situar en él situar en él TODOSTODOS los materiales de los materiales de
trabajo ordenadamentetrabajo ordenadamente
Pantalla de trabajo de FPPantalla de trabajo de FP
Pantalla de trabajo de FPPantalla de trabajo de FP
• Normal: edición
•HTML: código fuente
•Vista previa: como en “navegador”
Vistas de FPVistas de FP
Guardado de la páginaGuardado de la página
Nombres de archivo permitidosNombres de archivo permitidos
(Linux)(Linux)
Sólo se letras del alfabeto inglésSólo se letras del alfabeto inglés
No espacios( _ ), acentos, signos de No espacios( _ ), acentos, signos de puntuaciónpuntuación
(Se recomienda) Solo minúsculas(Se recomienda) Solo minúsculas
TÍTULO: Cualquier carácterTÍTULO: Cualquier carácter
Propiedades de la página: generalPropiedades de la página: general
Propiedades de la página: fondoPropiedades de la página: fondo
Propiedades de la página: fondoPropiedades de la página: fondo
Propiedades de la página: fondoPropiedades de la página: fondo
Propiedades de la página: fondoPropiedades 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 sitioPlantilla del sitio
•Tamaño de fuentes particular en HTML
•No subrayado: hipervínculos
•Probar con diferentes tamaños en navegador
FuentesFuentes
• Exposición ordenada de datos
• Formateo de la página:
Tablas invisibles
TablasTablas
• En el texto
• Fondo de página o tabla
• Con hipervínculo asociado
ImágenesImágenes
• GIF:Pocos colores
Animadas
Transparencias
• JPEG:Medios tonos
• BMP:Muy grandes
Formato de las imágenesFormato de las imágenes
Propiedades de las imágenesPropiedades de las imágenes
Texto asociado a una imagenTexto asociado a una imagen
Aparece al picar sobre imagen:
• Transparencias:
• Mapas de imagen:
Barra de herramientas de imagenBarra 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 reducidasImágenes reducidas(Thumbnails)(Thumbnails)
Imagen de fondoImagen 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 fondoImagen de fondo
Fondo lateralFondo lateral
• Saltos de una página a (un punto dado de) otra
• Asociables a figuras o textos
• Destino: archivo de cualquier formato
HipervínculosHipervínculos
• Texto: Subrayado
Colores particulares
según estado
• Figuras: Si borde, igual color
que hipervínculo de
texto
•Cursor: Mano
Hipervínculos: aparienciaHipervínculos: apariencia
•Marcar elemento
Hipervínculos: creaciónHipervínculos: creación
•Ventana destino del hipervínculo
Hipervínculos: creaciónHipervínculos: creación
•Ventana destino del hipervínculo
Hipervínculos: creaciónHipervínculos: creación
Desde FrontPage:
•Vista normal de FP:Picando sobre él + Ctrl
• Vista previa de FP:Picando sobre él
Desde navegador en:
Su PC Otra PC Servidor
Hipervínculos: Hipervínculos: comprobacióncomprobació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 Navegador
MarcadoresMarcadores
• Marcar sitio + opción "Insertar/Marcador"
Marcadores: inserciónMarcadores: inserción
Mismo documento: #marcador
O …
Hipervínculo a marcadorHipervínculo a marcador
Otro documento: dirección + marcador
Hipervínculo a marcadorHipervínculo a marcador
Mediante bpt+on “Dirección de correo electrónico”
Hipervínculo a e-mailHipervínculo a e-mail
ALGUNOS CONSEJOSALGUNOS CONSEJOSPARA LA CONFECIÓNPARA LA CONFECIÓN
DE SITIOS WEBDE SITIOS WEB
GENERALESGENERALES
Contenido y aprienciaContenido y apriencia
Diseño previo del sitioDiseño previo del sitio
Todo en directorio de trabajoTodo en directorio de trabajo
Uniformidad (plantilla)Uniformidad (plantilla)
DISEÑO DEL SITIODISEÑO DEL SITIO
Primera página: Primera página:
Objetivo y contenidoObjetivo y contenidoVínculo a diferentes partes, al mapa Vínculo a diferentes partes, al mapa o índice del sitio y a la página o índice del sitio y a la página personal o dirección de correo personal o dirección de correo electrónico del autor.electrónico del autor.
Titulo adecuado a cada páginaTitulo adecuado a cada página
DISEÑO DEL SITIODISEÑO DEL SITIO
Estructura:Estructura:
Hipervínculos “de navegación”: Hipervínculos “de navegación”: anterior, siguiente, mapa del sitio anterior, siguiente, mapa del sitio
No necesario volver siempre a No necesario volver siempre a página principalpágina principal
Hipervínculos de navegación en Hipervínculos de navegación en lugares fijoslugares fijos
DISEÑO DEL SITIODISEÑO DEL SITIO
Estructura:Estructura:
Para leer en la pantalla: no largasPara leer en la pantalla: no largas 3 o 4 pantallas 3 o 4 pantallas
Versión para imprimir (.doc o .pdf)Versión para imprimir (.doc o .pdf)
Diseño visible en monitores 640x480: Diseño visible en monitores 640x480: figuras y tablas de ancho < 620 pixelsfiguras y tablas de ancho < 620 pixels
IMÁGENES Y TABLASIMÁGENES Y TABLAS
Tener en cuenta tamaño de pantallaTener en cuenta tamaño de pantalla
Verificar que se observen detallesVerificar que se observen detalles
PrecauciónPrecaución con figuras digitalizadas o con figuras digitalizadas o copiadas de Internet y cambiadas de copiadas de Internet y cambiadas de tamaño: pérdida de detalles tamaño: pérdida de detalles corrección corrección
HIPERVÍNCULOSHIPERVÍNCULOS
Asociado a un texto: Asociado a un texto:
Indicación clara del destinoIndicación clara del destino
Asociado a una figura: Asociado a una figura:
Indicación del destinoIndicación del destino
mediantemediante
texto asociado a figuratexto asociado a figura
REVISIÓN FINALREVISIÓN FINAL
Redacción y ortografía Redacción y ortografía
Extensión de páginas Extensión de páginas
Hipervínculos "rotos": Hipervínculos "rotos": En su PC, en otra PC y en servidor En su PC, en otra PC y en servidor
Diferentes tamaños de texto en Diferentes tamaños de texto en navegadornavegador
Diferentes navegadoresDiferentes navegadores