ImágenesAl trabajar con imágenes en un sitio web es importante saber que los archivos que se manejan en Internet son de dos clases: los .jpeg y los .gif.
Los primeros se utilizan para fotografías, las cuales al utilizar este formato comprimido, ocupan menos al costo de bajar un poco la calidad.
El formato .gif, se utiliza para títulos, logotipos, y gráficos con menos de 256 colores. También se pueden usar para fotos pero la calidad será peor.
Si el fichero no es de fotografía, sino que utiliza colores planos, entonces suele manejar pocos colores. Si no llega a 256 colores, Front Page guardará la imagen en formato GIF. En cambio los ficheros de fotos los guarda en formato JPEG, que realiza cierta compresión de la imagen. La cuestión es que un fichero de fotografía ocupa muchísimo espacio (una pantalla viene a ser 1’5 Mb) y es necesario reducirlo, aunque sea a costa de un poco de calidad. El ordenador pregunta la razón de compresión que, por defecto, es de un 75 %.
La forma de insertar imágenes está en el menú Insertar – Imágenes, que tiene dos opciones: en Imágenes ofrece los clip art instalados con el Office 2000. En Desde Archivo, podemos buscar cualquier fichero de imágenes, por ejemplo en los CD comerciales con miles de imágenes, o también los que aporta el disco 2 del Office 2000, que no se instalan en el disco duro del ordenador.
Cuando se insertan imágenes de un CD ROM, o de un programa como el Office, el Front Page únicamente crea el vínculo correspondiente a esa imagen en su ubicación actual. Al enviar la página al proveedor que nos la aloja, no tendrá ese CD ROM, y no aparecerá la imagen. La solución es empezar por copiar la imagen a la carpeta en la que estamos trabajando la página web e insertarla desde ahí.
Otra forma de insertar una imagen es crearla y organizarla en otro programa y después cortar y pegarla en el Front Page. Y es que Front Page dispone de escasas posibilidades para tratamiento de imágenes individuales. El propio Word dispone de los letreros tipo Word Art, las autoformas, los gráficos; todos estos elementos se pueden cortar y pegar después en Front Page. No digamos si utilizas un programa de diseño.
Si se trabaja con un escáner, se puede cargar la imagen directamente desde el Front Page (también podrías hacerlo pasando previamente por otro programa). Se trabaja desde Insertar – Imagen – Escáner – Origen. En este punto seleccionas cuál es tu dispositivo y das a Adquirir.
Acerca del Tamaño de las imágenesComo ya dijimos antes, el tamaño de los archivos gráficos en una página Web debe ser pequeño para optimizar el tiempo de descarga de la página. Si abrimos la imagen en algún editor como PhotoShop o el Microsoft PhotoEditor, se debe elegir ver la imagen al 100% para saber cuál es el tamaño real de la imagen que se verá en la página. Con esto se logrará un mayor control de la misma.
Otro punto importante es que nunca es conveniente insertar una imagen grande y luego achicarla mediante los manejadores de la misma (los pequeños cuadraditos que aparecen en los bordes para cambiar el tamaño) del Front Page, ya que si hacemos esto, se achica la imagen que se ve en pantalla pero no el tamaño del archivo.
Para cambiar el tamaño abrimos la imagen en el editor y modificamos el zoom hasta el tamaño deseado.
En PhotoShop se debe ir a Image/Image size, en los cuadros de la unidad, seleccionamos Percent y teniendo marcada la casilla Constrain Proportions. A continuación se indica en cualquiera de los cuadros de Height o Width (pero solo en uno) el valor del zoom, con lo cual la imagen se reducirá al tamaño deseado. Después se guarda la imagen, con el mismo nombre o con otro para saber que es un archivo distinto.
Si usamos el Microsoft PhotoEditor el proceso es similar. Debemos ir a Imagen/Cambiar tamaño y fijarse que NO esté tildada la casilla Permitir distorsión una vez hecho esto, se varía el porcentaje de Alto o Ancho.
Propiedades de imagenAccedes a ellas desde Formato – Propiedades, o haciendo clic con el botón derecho en la imagen.
En la pestaña General, Origen de la imagen es de dónde la has tomado, el nombre y ubicación del fichero de origen. Este campo lo rellena Front Page él sólo cuando insertas la imagen, y no debes tocarlo.
Te ofrece guardarla como GIF o JPEG, de lo que hablamos más arriba.
Las Representaciones alternativas consisten en que si la imagen es grande y va a tardar en cargarse, se puede ofrecer un bosquejo suyo en baja resolución o un breve texto, en el mismo lugar que la posterior imagen.
En Apariencia puedes determinar la alineación y tamaño exacto de la imagen, en caso de que no te baste modificarla con el ratón.
Debajo de la referencia a los formatos GIF y JPEG se encuentran las casillas Entrelazado y Barridos progresivos. Se refieren también a que a la hora de cargar la imagen puede hacerse mediante un efecto, por el que la imagen va apareciendo como borrosa, por líneas, hasta su carga completa. Puede ser más útil en imágenes de cierto volumen, que tarden en cargarse.
No confundas estas propiedades con las de página, que se encuentran en Archivo – Propiedades.
Te mostramos a continuación la barra de herramientas de imágenes:
La posibilidad de añadir texto a una imagen sólo existe en el formato GIF, igual que la de establecer un color como transparente. Pasar a miniatura consiste en que se carga una miniatura de la imagen, considerando que la carga completa va a ser lenta y puede no ser indispensable para el visitante. Si éste desea la imagen completa, simplemente hace clic en la miniatura. Ver el plano de acceso al CPR en su página Web.
Ubicación• Ningún estilo de Ajuste: la imagen se ajustará como un carácter más.
• Izquierda: La imagen se alineará a la izquierda y se rodeará con texto.
• Derecha: Similar al anterior.
• Ningún estilo de ubicación: en este caso, no se podrá mover la imagen de la ubicación que tiene, para hacerlo, se selecciona:
• Relativo: en este caso se pueden especificar los valores de ubicación y tamaño en los cuadros de diálogo, así como el orden Z, es decir, la profundidad de la imagen con respecto a los demás objetos de la página, es decir, atrás o adelante del texto, o de otras imágenes.
• Absoluto: este método se utilice para ubicar una imagen con total libertad, pero en este caso, el texto no se ajustará a ella.
• Recortar: con esta herramienta podemos eliminar parte de una imagen que no precisemos, con lo cual también reduciremos su tamaño. Hacemos clic en la esquina de la porción de imagen que deseamos conservar y desplazamos el ratón hasta lograr un cuadrado. Para recortarla, se vuelve a hacer clic en el botón recortar en la barra de herramientas.
• Establecer color transparente: haciendo clic en un color de la imagen, este se volverá transparente. Sólo se puede elegir un color.
• Descolorar: es útil cuando se desea utilizar la imagen en el fondo y que no interfiera con el texto.
• Nuevo muestreo: cuando modificamos el tamaño de la imagen con los manejadores, dijimos que no se modificaba el tamaño del archivo, pero si luego de achicarla, apretamos este botón, se hará un nuevo muestreo y se reducirá el archivo de modo que el tamaño normal sea el que hemos modificado nosotros con los manejadores.
• Restaurar: restaura a la imagen a su estado original, si es que hicimos algún cambio en ella.
Mapas de imágenesEs algo que rebasa el propósito de este curso y que nos limitamos a describir. Imagina que tienes en una pantalla el mapa de España, con las autonomías dibujadas. Quieres unos vínculos de forma que si haces clic en la autonomía de Madrid, te lleva a una página sobre ella, si das en la de Galicia o Andalucía, o en cualquier otra, te llevarán a su página respectiva. Es decir, se trata de, a partir de una imagen, crear en ella unas zonas activas, cada una con un vínculo. Estas zonas pueden ser rectangulares, o también poligonales.
TablasLas tablas permiten bastante juego a la hora de situar textos por la pantalla, son la manera de saltarse las limitaciones que el lenguaje HTML tiene con la ubicación de los textos.
El 90 % de las posibilidades y manejo de las tablas en Front Page coincide con el modo de usar tablas en Word, y no lo vamos a reiterar.
Una diferencia pequeña pero importante es que una celda se selecciona presionando la tecla Alt mientras se hace clic con el ratón. (O en Tabla – Seleccionar – Celda).
Observa las Propiedades de tabla que se obtienen en el menú contextual (clic con el botón derecho), o en Tabla – Propiedades – Tabla.
Especificar ancho en porcentaje facilita que la tabla se ajuste a la ventana en caso, por ejemplo, de utilizar marcos.
Para eliminar los bordes, pon en Tamaño un 0.
Distinguir un borde claro y otro oscuro proporciona un interesante efecto 3D.
Se puede poner una imagen de fondo a la tabla.
Observa Tabla – Insertar – Título y en su menú contextual las Propiedades de título, que permiten situarlo también debajo de la tabla.
Reproducimos ahora el cuadro de diálogo de Propiedades de celda que se obtiene en su menú contextual.
Por defecto, una celda ocupa una fila y una columna, pero se puede determinar otra cosa, lo cual desplazará la columna o fila correspondiente, y quedará una tabla no rectangular.
Algunas opciones son idénticas a las de Propiedades de Tabla, sólo que aplicadas a la celda seleccionada.
No ajustar afecta al ancho de la celda cuando se rellene. En efecto, lo habitual es que, si el texto de la celda excede de su ancho, entonces este texto crea una nueva línea dentro de la misma celda, que ve incrementada su altura. Pues bien, la opción No ajustar va aumentando el ancho de celda a medida que se teclea, sin pasar a otra línea.
También existe Tabla – Autoajustar que ajusta el ancho de una columna al de la celda que tiene el texto más extenso.
La barra de herramientas de Tablas es parecida a la del Word.
Inserción de componentes ComentariosSe trata de incluir en la página Web comentarios que no salgan, no estén accesibles, al visitante. Se consiguen en Insertar – Comentarios. Sólo se ven en Vista Normal, no así en Vista Página. El objetivo es hacerte anotaciones que te recuerden asuntos pendientes. Por ejemplo, en una Web más importante, creada por un equipo de personas, las anotaciones para que los demás estén al tanto de los detalles a tener en cuenta, suelen ser interesantes.
Contadores de visitas
Son para contar el número de visitantes. Los podemos poner en la página principal (index), que es por donde los visitantes suelen acceder a nuestro sitio Web. También se pueden poner en otras páginas, y así sabremos cuáles son los asuntos que más interesan a nuestros visitantes.
Se crean en Insertar – Componente –Contador de visitas a la página.
Restablecer pone el contador en el número que le digamos, por ejemplo a 1 de enero lo podemos poner a cero.
Número fijo de dígitos quiere decir que saldrán los ceros a la izquierda de las cifras significativas.
Administrador de titularesEl nombre no indica bien de qué se trata. Consiste en crear una sucesión de imágenes. Cada ciertos segundos se van sustituyendo. Se puede asignar un vínculo a ese espacio de la pantalla.
Fecha y horaLos internautas agradecen saber si nuestras páginas están actualizadas, o, por el contrario, su información lleva ya mucho tiempo y, presumiblemente, se ha descuidado el mantenimiento del sitio Web. Al Insertar - Fecha y Hora aparece la fecha de la última modificación. Automáticamente, cuando actualicemos la página, se cambiará la fecha por la de este día.
MarquesinaOfrece marquesinas de posibilidades muy limitadas.
Puede ser útil mirar Estilo – Formato – Fuente , Borde, etc. Prueba con las diversas opciones, por ejemplo con Comportamiento – Alternar.
Botones activablesEl objetivo es crear vínculos más estéticos que los que meramente contienen texto. Puedes crear algún efecto, cuando el puntero del ratón pasa por encima. En Personalizado se puede añadir sonido o alguna imagen. Naturalmente se puede indicar un vínculo.
Otros componentesSe dispone de más componentes que vemos menos aplicables:
Se puede insertar una hoja de cálculo Excel en la página Web. Así por ejemplo, un banco puede ofrecer el cálculo de una hipoteca. Podríamos decir que es una hoja mixta, en la que el banco puede crear la hoja con su formato, sus titulares, sus fórmulas, y después el visitante, partiendo de esos datos, completa su caso personal y obtiene los resultados que necesita.
Imagen programada o Inclusión programada de página. Deseo que una determinada imagen, o una página entera, entre en vigor a las cero horas del 1 de enero. La creo ahora y la envío a mi proveedor de Internet como imagen programada, indicando en qué momento debe hacerse pública.
Existen otros componentes, pero el lector apreciará que corresponden a un curso de otro nivel.
FormulariosUn sitio Web puede generar correspondencia hacia su propia entidad. En el sitio Web del CPR hay un formulario de Solicitudes para inscribirse a cursos por vía telemática. Es frecuente en la red. Por ejemplo si deseas un proveedor de Internet gratuito, tendrás que darte de alta, y solicitará tus datos mediante un formulario.
En Archivo – Nuevo – Página puedes cargar plantillas de formularios. Por ejemplo el llamado Comentarios. En Vista Previa puedes observar sus posibilidades.
El formulario es algo típico de Access, aunque también se puede crear en Word. De todas maneras vamos a tratarlo aquí, ya que nos parece un capítulo menos conocido que el de las tablas.
Antes de ponerte a insertar campos de formulario, son precisas unas ideas generales:
1. Cuando insertas el primer campo de tu formulario, Front Page añade los botones Enviar y Restablecer. En los sucesivos campos no. La idea es que todo formulario debe tener un botón Enviar, y así lo prevé ya desde el principio. Estudiaremos más abajo este tipo de botones.
En cuanto al botón Restablecer, su acción es borrar todos los campos del formulario, para el caso de que hayas introducido errores y quieras volver a empezar.
2. Formulario es, propiamente, lo que aparece cerrado entre un marco de línea discontinua. Por eso podríamos tener en la misma página varios formularios. Observa el formulario siguiente, en el que se han descrito los principales tipos de campos:
3. La mayoría de los campos se modifican de tamaño como cualquier imagen
•
Cuadro de textoRectángulo vacío. El visitante de la Web puede rellenar el él campos de escritura libre, como sus apellidos.
•
Cuadro de texto con desplazamientoCuando la respuesta es más larga se pueden usar estos campos que llevan barras de desplazamiento.
•
Casilla de verificaciónEl visitante de la Web la activará o no. Cuando hay varias, cosa frecuente, puede activarse una, o varias o ninguna. Por ejemplo: un texto puede estar subrayado, en negrita y/o en cursiva. Puede tener todas estas propiedades, o una o ninguna.
•
Botón de opciónParecido, pero aquí ha de elegirse uno y sólo uno. Por ejemplo, sexo: hombre o mujer.
•
Menú desplegableEn el formulario de solicitud de inscripción en curso, de la página Web del CPR hay varios campos de menú desplegable. Así, en el tipo de Centro del profesor, las respuestas son: Público, Privado y Concertado. También son cerradas las respuestas sobre si el profesor es de Primaria o de Secundaria. En ejemplos de este tipo es preferible introducir previamente todo el elenco de respuestas, y que el visitante sólo tenga que elegir una, sin darle opción a escribir. De otra forma se recibirán respuestas variadas: profesor de ESO, profesor de Secundaria, Secundaria, etc.
Los valores se introducen de la siguiente manera: se hace clic con el botón derecho en el campo, y se elige Propiedades de Campo de Formulario. Ahí vas dando a Agregar introduciendo todas las posibles opciones.
•
Botón de comandoDespués de crearlo, haces clic con el botón derecho y eliges: Propiedades de Campo de Formulario.
En Valor/Etiqueta pondrás el texto que quieras. Por ejemplo, para un botón de tipo Restablecer puedes preferir el texto Borrar.
En Tipo de botón, ya te hemos hablado de los tipos Enviar y Restablecer. En el caso del botón Enviar, habrá que señalar nuestra dirección de correo electrónico. Esto se hace en Propiedades de Formulario y lo explicamos al terminar los campos de formulario.+
•
ImagenSirve para que un botón lleve una imagen en lugar de un texto.
Falta decir que los campos suelen llevar antes o después etiquetas, que señalan lo que esperamos que el usuario teclee en ellos. Estas etiquetas se teclean directamente en el formulario, delante o detrás de los campos.
Propiedades del formularioHaciendo clic con el botón derecho en cualquier parte del formulario, puedes elegir la opción Propiedades del Formulario.
La principal es borrar donde dice Nombre de Archivo y rellenar, en su lugar, la Dirección de correo electrónico.
Haz clic en el botón Opciones, y en la pestaña Resultados por Correo electrónico.
Puede ser interesante que con el formulario te remitan los nombres de los campos, y que vaya rellena por ti, por el creador de la página Web, el asunto. De esta manera, cuando recibas los correos, enseguida sabrás a qué se refieren.
Cuando un usuario te envía un formulario relleno, si todo ha ido bien, recibirá al instante un acuse de recibo educado. Pero puede suceder que tú quieras diseñar esa contestación. Puedes hacer una página Web para ello y poner en Página de Confirmación su dirección URL.
Una cuestión estética es alinear esos letreros y campos. La manera seria, aunque algo pesada, de hacerlo es mediante una tabla. Se crea dentro del formulario una tabla, por ejemplo de dos columnas. Así, en la columna de la izquierda, por ejemplo, pones los letreros y etiquetas, y en la de la derecha los campos. Otra forma más primitiva consiste en elegir el estilo Con formato, que lleva consigo un tipo de letra feo, pero que facilita los ajustes, ya que todas las letras, espacios y signos de puntuación tienen la misma anchura.
Las páginas Web profesionales no manipulan a mano los formularios recibidos, sino que los insertan directamente en ficheros, bases de datos, etc. Nosotros nos conformaremos con imprimirlos.
Tutorial: Cracion de paginas web sencillas, FrontPage, Word, POwer Point
May 27 2005, 08:50 PM
. Obtienes la siguiente pantalla:
. Es necesario introducir una dirección de correo electrónico, de ordinario aquélla en la que quiero recibir los mensajes de quienes visiten la página y quieran comunicarse conmigo. Una vez creados estos vínculos, haciendo clic en ellos se abrirá el Outook Express con la dirección prefijada puesta en el campo Para. Todo listo para enviar un e-mail.
. Deseamos crear ahora el vínculo, pero la página de destino aún no ha sido creada. Entonces creo un vínculo a página nueva, poniendo el nombre que deseo a la página. Luego la confeccionaré.
