Gráficos y tráfico

Los requisitos de belleza y expresividad del diseño de las páginas web están en constante conflicto con las capacidades técnicas del alojamiento web moderno. Por lo tanto, el diseñador del sitio web debe convertirse en intermediario entre el diseñador y el usuario y mantener estrictamente un equilibrio entre el atractivo visual y una velocidad razonable de entrega de información en la Web. Para solucionar con éxito este problema es necesario conocer todos los formatos gráficos utilizados en Internet, comprender las diferencias entre ellos, sus áreas de aplicación y características de uso.

Comprender la gran cantidad de formatos y protocolos aceptados en Internet y construir propia pagina, debe seleccionar lo que sea más adecuado para sus propósitos específicos. Algunos formatos pueden ser específicos de un solo navegador, mientras que otros requerirán un complemento especial. De una amplia variedad de formatos, hemos seleccionado solo aquellos que utilizan con mayor frecuencia los autores de sitios populares y son aceptados por los usuarios.

GIF y JPEG son dos de los formatos gráficos más populares que desde hace tiempo se han convertido en estándares de facto para su uso en la WWW. Ambos son bastante universales, legibles por la mayoría de los navegadores y no requieren especial software(o módulos adicionales). GIF y JPEG son formatos de imágenes rasterizadas que, en consecuencia, determinan un formato fijo (resolución) al mostrar dichas imágenes en la pantalla. Cuando intenta escalar (previsto en algunos navegadores), las imágenes rasterizadas (píxeles) pierden calidad significativamente. Para el formato GIF de 8 bits (256 colores), la elección de la paleta de colores también es un problema grave.

Los formatos de gráficos vectoriales son mucho más atractivos para su uso en la Web. A diferencia de los mapas de bits, los gráficos vectoriales se basan en una representación matemática (geométrica) de datos. Estas imágenes son significativamente más pequeñas en términos de volumen de almacenamiento/transferencia, se escalan fácilmente y prácticamente no pierden calidad durante ninguna conversión. Desafortunadamente, los formatos vectoriales todavía se utilizan poco en Internet, pero ya se han formado estándares que deberían ser de interés para los diseñadores.

Se han propuesto varios estándares vectoriales hace relativamente poco tiempo, y el Consorcio World Wide Web (W3C) actualmente está considerando los formatos PGML y VML. Sin embargo, Macromedia, que promueve VML, abrió hace tiempo su formato vectorial Shockwave Flash otros desarrolladores e implementaron módulos adicionales para ver gráficos en este formato para navegadores populares.

Sin embargo, los nuevos productos no son necesariamente mejores para todas las aplicaciones. Las imágenes más comunes publicadas en Internet siguen siendo fotografías digitales, dibujos e imágenes escaneadas, que requieren mucha mano de obra y no es aconsejable convertirlas a formato vectorial.

Por lo tanto, la elección del formato depende en última instancia de sus objetivos y de qué imágenes se adaptan mejor a sus necesidades. Público objetivo, tú decides.

GIF - formato para diseño

CompuServe originalmente pretendía su formato GIF para aplicaciones interactivas en el contexto de las capacidades limitadas de los gráficos estándar en una computadora personal. Originalmente era un formato rasterizado de 4 bits y luego de 8 bits con una paleta de colores específica que admitía un máximo de 256 colores. Una de las ventajas importantes del formato es que las imágenes se pueden indexar en una paleta específica (conjunto de colores), mientras que las imágenes JPEG no se pueden "bloquear" en una paleta y su visualización "correcta" no siempre es posible. Esta propiedad es especialmente importante para aquellos desarrolladores que utilizan la indexación de paletas para optimizar la transferencia de imágenes para todas y cada una de las plataformas (ya sea PC, Mac, Web-TV u otras), independientemente de la profundidad de color con la que trabaje un sistema en particular. Esta versatilidad se consigue a través de una paleta limitada de 216 colores, que incluye todos los colores habituales utilizados tanto en Windows como, por ejemplo, en MacOS. Diseñar un sitio en una paleta universal garantiza una visualización consistente, multiplataforma e independiente del hardware. Además, el formato GIF utiliza un esquema de compresión sin pérdidas (con un algoritmo de codificación de repetición simple: una secuencia de bytes del mismo color se reemplaza por una palabra de dos bytes, uno de los cuales contiene el patrón de sombreado y el segundo determina el número de repeticiones), para que los datos gráficos en este formato no pierdan información durante el proceso de compresión y recuperación.

Sin embargo, es precisamente debido a estas restricciones de color incorporadas que el formato GIF sólo se puede utilizar para imágenes que tienen un número limitado de colores, como diagramas en blanco y negro o aquellas que contienen grandes áreas de un color, como marcos de dibujos animados o dibujos digitales con relleno de colores sólidos. Por supuesto, puedes guardar cualquier imagen en formato GIF usando el llamado dithering y así obtener una calidad bastante decente, pero en este caso corres el riesgo de un aumento significativo en el tamaño del archivo después de aplicar la compresión de memoria descrita anteriormente a las repeticiones (en el caso degenerado, cuando no hay una sola repetición adyacente en la imagen, obtendrá exactamente el doble del tamaño del archivo en comparación con el original sin comprimir).

Por tanto, las principales ventajas del formato GIF son el uso de compresión sin pérdidas y la conservación económica de áreas sólidas de color con límites claros y transiciones de color estrictas. El formato JPEG se diferencia del descrito en que, dependiendo del nivel de compresión, las áreas sólidas se destruyen y las transiciones de color nítidas se suavizan o difuminan.

El criterio principal para elegir el formato GIF: si usted mismo hizo un dibujo en un paquete de gráficos como Photoshop o Painter que tiene grandes áreas del mismo color, o procesó una imagen existente y desea mantener un alto contraste (necesario, por ejemplo, cuando mostrando texto), luego guárdelo en este formato (principalmente esto se aplica a dibujos en blanco y negro o con colores deficientes).

Para fotografías, vídeos u otras imágenes a todo color que utilizan transiciones de color suaves (degradados), utilice el formato JPEG.

También es importante recordar que si intentas guardar imágenes de tono continuo como GIF, probablemente tendrás que descartar mucha información en el proceso de preparación de la imagen (al convertirla a una paleta fija) y la compresión del GIF. Este método será tan ineficaz que también perderá económicamente (tanto en términos de costes laborales como de tamaño de archivo).

Entre otras cosas, el formato GIF proporciona la llamada apariencia entrelazada, que ayuda a los usuarios con canales lentos a evaluar el contenido de la imagen al comienzo de la recepción (el efecto es similar al dibujo gradual de una imagen fuera de línea). imagen de enfoque) y el tiempo necesario para su completa transmisión, y en consecuencia aceptar decidir si continuar tomándolo o si es mejor dejar de tomarlo. Sin embargo, a diferencia del JPEG progresivo, el efecto aquí es más psicológico que real (ver figura).

También conviene recordar una ventaja importante del formato GIF, que en algunos casos no se puede evitar a pesar de todas sus deficiencias, es la compatibilidad con la transparencia (extensión GIF89a), que permite mostrar una silueta con contornos no rectangulares sobre un fondo existente. . La transparencia en el formato GIF se implementa de forma primitiva: se asigna un color (normalmente el fondo) como transparente. Esta ventaja se utiliza a menudo al crear botones e íconos en el diseño de páginas (JPEG no ofrece ningún soporte para transparencia).

En conclusión, podemos decir lo siguiente: GIF - mejor elección para lograr un compromiso efectivo entre el hardware y el software existentes, y la capacidad de indexar una imagen GIF de 8 bits a 216 colores universales es esencial cuando se pretende que sus imágenes se muestren en una variedad de navegadores y plataformas desconocidas.

JPEG: formato para fotografías y fotogramas de vídeo.

El formato JPEG recibe su nombre del acrónimo Comité Conjunto de Expertos Fotográficos, que creó este estándar a finales de los 80 y principios de los 90. El formato JPEG se basa en un algoritmo de compresión con pérdida (transformación de coseno discreta), que divide la imagen en áreas (generalmente cuadrados de 8x8 píxeles) dentro de las cuales la distribución del color se reemplaza por una función matemática y solo se almacenan los coeficientes de esta función, lo que permite reconstruir su apariencia. Naturalmente, encontrará cierta pérdida de calidad (dependiendo de la complejidad de la función utilizada para reemplazar la imagen) y después de la restauración ya no obtendrá una imagen real, sino su "sustituto" matemático. Sin embargo, dependiendo de la calidad del original y del grado de compresión, la pérdida de calidad puede ser completamente invisible para el espectador. Pero la principal ventaja del formato JPEG sobre GIF es que mientras GIF es sólo de 8 bits (256 colores), JPEG es de 24 bits y puede mostrar hasta 16,7 millones de colores.

Por esta razón, un JPEG a todo color reproduce naturalmente mucha más información de vídeo que un GIF. Este formato es más adecuado para imágenes de la vida real: imágenes escaneadas o fotos digitales, así como fotogramas de vídeo digitalizados o escenas de gráficos por ordenador en 3D renderizadas.

Otra ventaja de JPEG es que, a diferencia de GIF, permite establecer de forma independiente el grado de compresión aplicado a la imagen fuente, lo que permite mantener el equilibrio necesario entre tamaño y calidad.

Las relaciones de compresión para JPEG varían ampliamente según el programa de edición de imágenes utilizado, pero las páginas web suelen utilizar relaciones de 10:1 o 20:1 (expresadas como una proporción del volumen con respecto a la imagen original) que generalmente proporcionan una calidad aceptable. Sin embargo, puedes comprimir una imagen a valores extremos de 100:1 (con una importante pérdida de calidad, claro).

Entonces, cuando trabaja con una fotografía en formato JPEG, tiene la oportunidad de guardar una imagen de 24 bits con 16,7 millones de colores y, a pesar de la pérdida de calidad durante la compresión, sigue siendo mucho más consistente con el original que una de 256 bits. Rendimiento GIF en color. En este caso, la inevitable pérdida de calidad depende en gran medida del tamaño, la calidad y el tipo de la imagen original.

Además, JPEG le permite definir la llamada visualización progresiva, es decir, cuando, al cargar, aparece inmediatamente en la pantalla una representación "aproximada" de la imagen, que, a medida que se recibe información adicional, mejora gradualmente (al mismo tiempo, puede obtener la comprensión necesaria de la esencia del material que se envía incluso antes de que se complete la descarga e interrumpir el proceso en cualquier etapa, lo que ahorra significativamente tiempo al ver el contenido en línea).

Puede utilizar estas herramientas como desee, y esta manifestación paso a paso puede ser de gran ayuda en la lucha contra la congestión del canal. El único problema con el JPEG progresivo (a diferencia del GIF entrelazado) es que es posible que los navegadores más antiguos no lo admitan.

PNG: una novedad rasterizada universal

La próxima generación de formatos rasterizados, PNG, toma las mejores características de JPEG y GIF y agrega su propio enfoque único a la presentación de imágenes, lo que hace posible incrustar diferentes versiones de la misma imagen en un solo archivo para niveles bajos, medios y altos. resoluciones.

El formato PNG (Portable Network Graphics) es un formato de gráficos rasterizados relativamente nuevo que ha sido aprobado como estándar por el consorcio W3C y debería sustituir gradualmente a ambos formatos “obsoletos”: tanto GIF como JPEG. PNG ofrece indexación de color (hasta 256 colores), compatibilidad con colores de 24 y 48 bits (True-Color) y funciona con un canal de transparencia (canal alfa), y es mucho más eficiente que los formatos tradicionales de almacenamiento de imágenes rasterizadas. .

El algoritmo de compresión para una imagen a todo color es superior en calidad a JPEG y, al admitir una paleta indexada limitada (hasta 256 colores), el nuevo formato proporciona una compresión sin pérdidas entre un 10% y un 30% mejor que la implementada en el formato GIF. lo que lo hace óptimo para su uso en cualquier caso. Desafortunadamente, el nuevo formato no permite sacrificar la calidad de la imagen a cambio de una mayor relación de compresión, como en formato JPEG.

El soporte de transparencia en formato PNG, a diferencia de GIF, es completo, es decir, puede crear imágenes o bordes translúcidos, por lo que el problema de los bordes "limpios", tan difícil de resolver cuando se usa transparencia en un archivo GIF, se supera fácilmente. aquí.

Sin embargo, a pesar de todas las mejoras que ofrece PNG, el nuevo formato sólo despegará una vez que lo utilicen los diseñadores de sitios web y los fabricantes de software para representar imágenes en el nuevo formato y prepararlas para su publicación. Mientras tanto, es bastante difícil encontrar imágenes PNG en Internet, a pesar de la reciente inclusión de soporte para este formato tanto en Netscape Navigator como en Microsoft Internet Explorer.

Y aunque ellos Últimas Versiones y admiten PNG, lo hacen de forma muy limitada. Actualmente, la única solución para los usuarios que desean ver un archivo PNG completo es autoinstalación módulo externo (como PNG Live).

Aparentemente, los desarrolladores se están demorando, esperando que los usuarios cambien completamente a los nuevos formatos. Bueno, un conservadurismo saludable nunca está de más, pero aun así le recomendamos encarecidamente que pase gradualmente a PNG, reemplazando al menos todos los usos existentes del formato GIF.

Representación vectorial

Tanto JPEG, GIF como PNG son formatos rasterizados basados ​​en una representación discreta (píxeles o puntos) de una imagen, mientras que los formatos vectoriales se basan en fórmulas matemáticas (representación geométrica de formas). Los gráficos vectoriales ofrecen ventajas significativas sobre los rasterizados, especialmente cuando se trata de diagramas, texto y gráficos industriales (y los formatos rentables son de gran importancia para Internet).

Entonces, la primera ventaja es el tamaño significativamente más pequeño de las imágenes vectoriales en comparación con los mapas de bits, porque no se describe cada píxel individual de la imagen, sino la figura completa (por ejemplo, para definir un círculo, es necesario pasar de 3 a 4 números: radio, coordenadas del centro y tal vez el tipo o grosor de la línea y sus atributos). Las fórmulas matemáticas que describen la representación vectorial ocupan mucho menos espacio que los píxeles individuales y sus atributos.

Otra ventaja importante de la representación vectorial es la capacidad de escalar casi ilimitadamente una imagen (o detallar partes de ella) sin pérdida de resolución o claridad de la imagen. No se requiere ningún esfuerzo para adaptar la representación vectorial a una paleta, plataforma, hardware o características de diseño en particular; y la coordinación del esquema de compresión y la calidad de visualización se realiza sin problemas.

Sin embargo, no todos imagen de la trama se puede convertir a formato vectorial (por ejemplo, fotografías, imágenes escaneadas o dibujos rasterizados son difíciles de vectorizar). Pero es simplemente estúpido convertir dibujos vectoriales especialmente preparados (como dibujos lineales, pictogramas, ilustraciones técnicas, mapas, gráficos de información y otros que históricamente son vectoriales) en formato rasterizado para su publicación en Internet, lo que está sucediendo en todas partes hoy en día.

Los problemas con la visualización de gráficos vectoriales en la World Wide Web surgieron porque no había otro método de visualización que no fuera el rasterizado, y el módulo integrado que apareció para mostrar archivos en formato PDF no proporcionaba la flexibilidad adecuada y requería almacenar todo el contenido en un solo formato. PDF.

Para brindar la capacidad de incrustar gráficos vectoriales sin problemas en un formato HTML tradicional sin ningún software adicional, el comité de estándares del W3C está considerando dos nuevos estándares vectoriales: PGML (Lenguaje de marcado de gráficos de precisión) y VML (Lenguaje de marcado vectorial). ). PGML es compatible con Adobe Systems, IBM, Netscape y Sun Microsystems, y VML es compatible con Microsoft, Hewlett-Packard, Autodesk, Macromedia y Visio. Ambos estándares se basan en extensiones del lenguaje de marcado XML, promovido para su uso en la web como sucesor de HTML y recomendado por el W3C para uso futuro.

Pero actualmente ninguno de los navegadores admite ningún estándar de gráficos vectoriales, aunque ya hay módulos adicionales (complementos) disponibles. Entre las formas más populares de mostrar imágenes vectoriales estáticas en la Web hoy en día se encuentran el formato SWF (Shockwave Flash) de Macromedia y el formato Xara Flare, aún subestimado.

Llamarada- Buena decisión, que permite la inclusión de imágenes vectoriales que permiten un aumento casi ilimitado del nivel de detalle de la página, a la vez que sus tamaños son comparables a Shockwave Flash. Esto no quiere decir que usar módulos adicionales para ver imágenes sea tan inconveniente, pero cuando use dichas herramientas en sus páginas, asegúrese de advertir al usuario sobre esto y darle la oportunidad de descargar el módulo correspondiente antes de ingresar a la página. que incluirá estos elementos. A corto plazo, esto, por supuesto, ralentizará el proceso de navegación para usuarios nuevos, pero poco a poco irá ganando más y más adeptos hasta que las herramientas correspondientes finalmente se incluyan en la próxima versión del navegador y los principiantes ya no necesiten el módulo adicional.

Animación, interactividad e interacción.

En términos generales, las imágenes GIF se pueden organizar como una pila especial en un archivo, y la “película” resultante (flipbook) se puede reproducir creando una animación rasterizada simple. Tanto Netscape como Microsoft han brindado soporte para GIF animados desde sus terceras versiones de sus navegadores, por lo que ahora es difícil evitar su presencia en la Web. Están muy extendidos (tanto comerciales como disponibles públicamente) numerosos animadores GIF que le permiten crear pilas de GIF similares. Sin embargo, "revitalizar" el formato GIF puede provocar problemas incontrolables. tamaños de archivos, porque cada “nivel” de dicha pila es una imagen GIF individual, por lo que 15 cuadros por segundo típicos para la animación por computadora pueden “producir” innumerables kilobytes.

En combinación con Java o JavaScript, puede crear animaciones interactivas que responderán al usuario.

Veamos ahora otras soluciones para la animación web y la interacción interactiva del usuario, y el papel principal aquí lo sigue desempeñando Macromedia, que lleva mucho tiempo en el mercado con sus programas Shockwave y Flash y mejora constantemente sus productos, aumentando su eficiencia de acuerdo con con las necesidades de usuarios y diseñadores.

Shockwave, creado originalmente como un formato para Macromedia Director, es una familia de protocolos destinados principalmente a la producción de contenido gráfico e interactivo creado específicamente para su uso en Internet. ¿Qué es el flash de onda de choque? instrumento único y uno de los más las mejores maneras para crear animaciones y publicarlas en una página web. Shockwave Flash produce archivos muy pequeños (ya que utiliza un formato de representación predominantemente vectorial) y, en comparación con otros formatos, es el más conveniente desde el punto de vista de la preparación.

Al publicar dicha animación en sus páginas, no olvide notificarlo al usuario para que pueda abastecerse de un módulo adicional con anticipación y prepararse para la tediosa espera de la descarga. Sin embargo, las últimas versiones de Netscape Navigator y explorador de Internet Tiene módulos de visualización para animaciones Flash incluso en el paquete básico. Netscape ha confirmado que futuras versiones de Navigator tendrán este soporte para Flash, incluso a nivel de código.

La decisión final es tuya

Entonces, la actitud hacia la presentación de contenidos web está cambiando, aparecen nuevos formatos de datos y herramientas de desarrollo que los soportan. Sin embargo, los formatos más antiguos (GIF y JPEG para presentar gráficos) siguen siendo bastante populares. Son compatibles con casi todos los navegadores y la mayoría de los desarrolladores tienen una amplia experiencia trabajando con ellos. Es importante utilizar el formato correcto para el propósito específico para garantizar un equilibrio entre la calidad de la imagen y el tamaño de los archivos. Por ejemplo, una imagen en formato GIF puede ocupar más espacio y producir un resultado de menor calidad que en formato JPEG, mientras que para otra será todo lo contrario.

Sin embargo, al representar imágenes rasterizadas, PNG se convierte en el formato preferido, y si va aún más allá e intenta utilizar una imagen vectorial, entonces el formato Shockwave Flash de Macromedia está a su servicio hoy.

El formato SWF (Shockwave Flash) no es un formato de uso común, sino un formato vectorial interno. programas flash de Macromedia (ver “Lecciones Flash Macromedia"en CD-ROM), por lo que para obtener su propia imagen o animación, deberá adquirir el paquete multimedia adecuado de Macromedia y el usuario deberá instalar un módulo adicional para visualizar el resultado. Por lo tanto, para colocar simplemente una imagen vectorial en su página web, deberá superar una serie de inconvenientes.

Sin embargo, otros formatos vectoriales están en camino y pronto se convertirán en estándar.

ComputadoraPrensa 5"1999

Se utiliza una sola etiqueta para insertar una imagen en el texto de una página web. (Tabla P 1). Los atributos de esta etiqueta establecen todos los parámetros de la imagen colocada en la página. Es obligatorio el atributo SRC, que define la dirección y el nombre del archivo gráfico. Si el atributo SRC no está configurado, solo se mostrará el icono de imagen en blanco.

Estructura de etiquetas con el atributo SRC se ve así:

.

Si archivo gráfico con el nombre Instituto se encuentra en la misma carpeta que la página Web, luego para colocarla debes escribir:

.

Nombre de archivo Formato

Para colocar un archivo gráfico con el nombre MINSK, ubicado en D:\Collection\Cities\MINSK.GIF, se debe escribir .

Usando una etiqueta La página web contiene un archivo gráfico ubicado en otra computadora en Internet.

Para crear una página Web con una foto de nuestro instituto, que se muestra en la Fig. 4.1, debe ingresar el siguiente código HTML:

Nuestro Instituto

Arroz. 4.1. Página web con foto del instituto.

En el ejemplo anterior, la altura de la foto (ALTURA) es de 200 píxeles y el ancho (ANCHO) es de 300 píxeles. Para colocar la foto, se crea un párrafo con alineación central.

Lineas horizontales

Las líneas horizontales se colocan en una página web usando una sola etiqueta.

---

. Los atributos TAMAÑO, ANCHO, COLOR y ALINEAR cambian el grosor, ancho, color y alineación de las líneas, respectivamente.

Veamos algunos ejemplos para explicar la ubicación de las líneas horizontales:

1.

---

- una línea horizontal a lo largo de toda la página, de 2 píxeles de grosor.

2.

---

WIDTH = "200" ALIGN="RIGHT"> – una línea horizontal de color verde, de 15 píxeles de grosor, 200 píxeles de ancho y alineada a la derecha.

3.

---

– una línea azul horizontal que cubre toda la página, de 25 píxeles de grosor.

4.

---

WIDTH = "300" ALIGN = "LEFT"> – una línea horizontal de color rojo, de 20 píxeles de grosor, 300 píxeles de ancho y alineada a la izquierda.

La visualización de líneas para los cuatro ejemplos grabados se muestra en la Fig. 4.2.

Arroz. 4.2. Líneas en una página web

MESAS

Crear tablas

La tabla se crea usando una etiqueta emparejada.

… . Esta etiqueta crea una tabla en la ubicación donde se agrega.
en código HTML.

Cualquier tabla consta de filas y las filas, de celdas. Las siguientes etiquetas se utilizan para formar filas y celdas de la tabla:

... – nueva línea;

... – celda de encabezamiento;

... – una celda de tabla normal.

Estas etiquetas están escritas dentro de una etiqueta emparejada.

… .

La tabla se forma fila por fila: primero se especifica una fila y en ella se indica el número requerido de celdas, luego la segunda fila, etc.

Para obtener la tabla que se muestra en la Fig. 5.1, debe escribir el siguiente código HTML:

Arroz. 5.1. Página de tabla

El texto en las celdas del encabezado de la tabla (Fig. 5.1) se muestra en fuente seminegrita y alineado con el centro de la celda, mientras que en las celdas normales el texto no está resaltado y está alineado hacia la izquierda.

Cabe señalar que en el código HTML de la página anterior la etiqueta

Carros	Precio	Vado	5000	Golf	6000

contiene el atributo BORDER con el valor "1". Esto significa que en la tabla que se muestra en la Fig. 5.1, el espesor del borde exterior es
1 píxel. si escribimos

… ,

entonces el grosor del borde exterior será de 6 píxeles. Para evitar que se muestren los bordes de la tabla, debe establecer el atributo BORDER en 0 o simplemente omitir este atributo.

Las imágenes gráficas colocadas en una página web no sólo contribuyen a una mejor percepción de la información, sino que también hacen que las páginas sean más vívidas y memorables. Puede preparar imágenes gráficas usted mismo o utilizar los servicios de diseñadores. También puedes usar bibliotecas de gráficos. productos de software, como oficina de microsoft, Corel Draw, etc.

Coloquemos una imagen gráfica de la biblioteca Clip Art incluida en Microsoft Office en la página de inicio del sitio web que estamos creando. Para hacer esto, siga estos pasos:

1. Abra el sitio web creado.
2. Abierto pagina de inicio haciendo doble clic en el nombre del archivo index.htm en el panel Lista de carpetas(Lista de carpetas).
3. En el menú Insertar(Insertar) seleccionar comando Dibujo Imágenes(Clipart). Aparece un panel en la ventana del programa FrontPage. Insertando una imagen(Insertar imagen prediseñada).
4. Seleccione el comando de este panel colección de fotos(Galería media). Se abre un cuadro de diálogo que le permite seleccionar una imagen gráfica (Fig. 15.8).

Arroz. 15.8.

En la parte superior del cuadro de diálogo, además de los botones que controlan la visualización de los objetos que se muestran en la ventana, así como la copia y eliminación de objetos, hay botones de asignación (ver tabla).

1. Panel Lista de colecciones contiene las carpetas de su computadora con archivos multimedia, así como archivos de imágenes de la biblioteca de imágenes prediseñadas. Abra la carpeta de la categoría de imágenes que le interesen. EN espacio de trabajo Las imágenes de esta categoría aparecerán en la ventana. Cuando coloca el cursor sobre una imagen, aparece una pista que indica el nombre, el tamaño de la imagen y el archivo que contiene, así como el formato de la imagen gráfica (Fig. 15.9).

1. Haga clic en el botón de flecha en el lado derecho de la imagen seleccionada. Aparece un menú contextual.
2. Seleccione el comando del menú contextual Copiar(Sora).
3. Vaya a una página web y pegue en ella una imagen del portapapeles utilizando cualquier herramienta conveniente. Por ejemplo, presione la combinación de teclas +.
4. Guarde la página web que contiene la imagen gráfica haciendo clic en el botón Ahorrar(Guardar) en la barra de herramientas estándar. Aparece un cuadro de diálogo Guardar archivos incrustados(Guardar archivos incrustados) (Fig. 15.10), ofreciendo guardar la imagen colocada en la página en una carpeta imágenes Sitio web con el nombre con el que se ubicó el archivo en la biblioteca. Esta ventana contiene los siguientes botones:
   • Rebautizar(Cambiar nombre): le permite cambiar el nombre del archivo.
   • Cambiar carpeta(Cambiar carpeta): abre un cuadro de diálogo Cambiar carpeta(Cambiar carpeta), que contiene carpetas del sitio web actual, lo que le permite seleccionar una carpeta diferente para guardar el archivo.
   • Acción(Establecer acción) abre un cuadro de diálogo tarea de acción, permitiéndole cambiar el valor Ahorrar Guarde la columna Acción en no guardar(No guardar). Ahorrar El dibujo se guarda en la carpeta del sitio web que especificó; de lo contrario, la página web contendrá un enlace a la imagen ubicada en la biblioteca de imágenes prediseñadas.

Región Dibujo(Vista previa de la imagen) muestra la imagen que se está colocando. Configurando en el cuadro de diálogo Guardar archivos incrustados parámetros deseados, presione el botón DE ACUERDO. El archivo gráfico se guardará en la carpeta del sitio web que especificó.

Arroz. 15.10.

Colocar una imagen gráfica de un archivo

Analizamos la posibilidad de colocar una imagen gráfica de la biblioteca Clip Ait en una página web. Para colocar una imagen gráfica de un archivo en una página, realice una de las siguientes acciones:

• En el menú Insertar(Insertar) seleccionar comando Dibujo(Imagen), y luego en el submenú que se abre, la opción Desde el archivo(Desde el archivo)
• Clic en el botón Agregar una imagen desde un archivo(Insertar imagen desde archivo) en la barra de herramientas estándar
• Clic en el botón Agregar una imagen desde un archivo(Insertar imagen desde archivo) en la barra de herramientas Dibujos(Fotos)

Cuando realiza cualquiera de estas acciones, se abre un cuadro de diálogo Dibujo(Imagen) (Figura 15.11). Usando esta ventana, busque el archivo gráfico requerido y haga clic en el botón para colocarlo en la página web. Insertar(Insertar). El cuadro de diálogo se cerrará y la imagen se colocará en la página.

Arroz. 15.11.

Configurar propiedades de imagen

Después de colocar una imagen en una página web, debe configurar sus propiedades usando el cuadro de diálogo Propiedades de la imagen(Propiedades de imagen) (Fig. 15.12). Para abrirlo, haga clic en la imagen y luego realice una de las siguientes acciones:

• En el menú Formato(Formato) seleccione comando Propiedades(Propiedades)
• Selecciona un equipo Menú de contexto Propiedades de la imagen(Propiedades de imagen)
• Presione la combinación de teclas +

Ventana de diálogo Propiedades de la imagen contiene tres pestañas: Son comunes(General), Grabación de vídeo(Video) Vista(Apariencia). Echemos un vistazo más de cerca a las opciones de personalización usando esta ventana de visualización.

Colores en la mesa

Cómo construir una tabla en una página

Listas dentro de listas

Listas de definiciones

lista numerada

Lista con viñetas

Cómo crear una lista en una página

Hay tres tipos principales de listas: listas con viñetas, numeradas y de definición. La principal diferencia entre los tipos enumerados es el método y la estructura de numeración.

El más utilizado es el sin numerar, o lista con viñetas. Una lista con viñetas se especifica mediante etiquetas y los elementos de la lista entre estas etiquetas se especifican mediante una etiqueta.

.

lista numerada Recuerda mucho al marcado. La única diferencia es que en una lista numerada, los números o letras secuenciales se colocan automáticamente antes de cada elemento en lugar de marcadores gráficos.

Una lista numerada se especifica mediante etiquetas. Como en lista con viñetas, cada elemento está especificado por una etiqueta

. De forma predeterminada, las listas HTML se numeran automáticamente con números arábigos: 1,2,3, etc. Puede especificar un método de numeración diferente. Para cambiar el tipo de numeración predeterminado, agréguelo a la etiqueta

palabra clave CINTA.

TAPE=1 – Numeración estándar(1,2,3,4,5,…)

CINTA=A – Letras mayúsculas(A, B, C, D,…)

TAPE=a – Cartas urgentes (a, b, c, d,…)

CINTA=I – Números romanos (I, II, III, IV,…)

TAPE=i – Números romanos en minúscula (i, ii, iii, iv,…)

Las listas de definiciones se ven un poco diferentes a otros tipos de listas. En este caso, se utilizan dos etiquetas para describir cada elemento de la lista, en lugar de una etiqueta.

1. . Etiqueta
   especifica un elemento separado, es decir, un término definido, y la etiqueta
   - el resto de la información, que se muestra en la línea siguiente, con sangría. La segunda línea de información se llama definición. Una lista de definiciones se especifica de la misma manera que otras listas. La única diferencia es que cada elemento requiere dos etiquetas.

   Una de las ventajas de las listas es que se pueden anidar unas dentro de otras. Anidar una lista dentro de otra lista es lo mismo que simplemente crear una lista. No hay especiales para esto. etiquetas HTML. Para evitar confundir al navegador, asegúrese de cerrar cada lista interna con una etiqueta. Incluso pueden invertir el uno en el otro. Varios tipos liza.

   Reproduce todas las listas anteriores

   Las listas tienen un inconveniente: son unidimensionales. Esto significa que sólo puedes colocar información en líneas consecutivas. Las tablas le permiten organizar los datos no sólo en filas, sino también en columnas.

   Se utilizan varias etiquetas para definir tablas. Etiquetas

   Y enmarca toda la tabla, y una serie de otras etiquetas determinan cómo se mostrará la información. La tabla muestra Descripción completa etiquetas de tabla.

   
   
   

   Etiquetas HTML para crear tablas:

   Descripción de etiquetas

   y Estas etiquetas cubren la mesa. Etiqueta

   le dice a los navegadores que lo que sigue es una descripción de la tabla. Si desea que sea visible una cuadrícula que separa filas y columnas, agregue la palabra clave BORDER.

   aparece como encabezado. También puedes usar etiquetas para establecer el título. Y.

   Las etiquetas muestran texto con encabezados de fila o columna en fuente un poco más grande y en negrita.

   Y Las etiquetas definen cada fila de la tabla. Etiqueta Es opcional, pero hace que su código HTML sea más completo y comprensible.

   Este par de etiquetas separa el texto de cada celda de la tabla.

   Cree un archivo en el que construya una tabla de cinco filas y cinco columnas.

   Hay una serie de etiquetas que le permiten configurar colores de fondo y cuadrículas de tablas. En el primer caso, la palabra clave BGCOLOR se inserta en la etiqueta.

   y el texto marcado con estas etiquetas es

   Y
   Y

   siguientes imágenes:

   Además de la palabra clave BGCOLOR, existen otras formas de controlar el color:

   BORDERCOLOR Cambia el color de la cuadrícula de la tabla.

   BORDERCOLORDARK/ Se utiliza para cambiar la cuadrícula con

   BORDERCOLORLIGHT con un efecto tridimensional adicional

   Cambiar el color de la cuadrícula de la mesa con efecto 3D.

   Lección 12-13. Usando gráficos

   Las imágenes y los gráficos son muy importantes en la WWW. Esta es la única herramienta de Internet que le permite ver imágenes y texto simultáneamente en la pantalla.

   Para colocar una imagen en una página web, necesita saber cómo aplicar la etiqueta. . Introduce una etiqueta y la palabra clave SRC= para especificar qué gráficos cargar.

   

   Al ingresar esta etiqueta, tenga en cuenta que el archivo debe estar en la misma carpeta que su archivo HTML.

   imágenes HTML agregado a páginas web usando una etiqueta . El uso de gráficos hace que las páginas web sean más atractivas visualmente. Las imágenes ayudan a transmitir mejor la esencia y el contenido de un documento web.

   Usando etiquetas HTML

   Insertar imágenes en un documento HTML

   1. Etiqueta

   Elemento representa una imagen y su contenido alternativo, que se agrega mediante el atributo alt. Desde el elemento está en minúscula, se recomienda colocarlo dentro de un elemento de bloque, por ejemplo,

   O

   .

   Etiqueta tiene un atributo src requerido, cuyo valor es la ruta absoluta o relativa a la imagen:

   

   Para etiqueta Los siguientes atributos están disponibles:

   Tabla 1. Atributos de etiqueta

   Atributo	Descripción, valor aceptado.
   alternativo	El atributo alt agrega texto alternativo a una imagen. Se muestra donde aparece la imagen antes de cargarla o cuando los gráficos están deshabilitados, y también se muestra como información sobre herramientas al pasar el mouse sobre la imagen. Sintaxis: alt="descripción de la imagen" . !}
   origen cruzado	El atributo crossorigin le permite cargar imágenes de recursos en otro dominio mediante solicitudes CORS. Las imágenes cargadas en el lienzo mediante solicitudes CORS se pueden reutilizar. Valores permitidos: Anónimo: la solicitud entre orígenes se realiza mediante un encabezado HTTP y no se transmiten credenciales. Si el servidor no proporciona credenciales al servidor desde el que se solicita el contenido, la imagen se dañará y su uso será limitado. use-credentials: la solicitud de origen cruzado se realiza pasando credenciales. Sintaxis: crossorigin="anónimo" .
   altura	El atributo de altura especifica la altura de la imagen en px. Sintaxis: altura="300" .
   ismapa	El atributo ismap indica que la imagen es parte de una imagen de mapa ubicada en el servidor (una imagen de mapa es una imagen con áreas en las que se puede hacer clic). Cuando hace clic en la imagen de un mapa, las coordenadas se envían al servidor como una cadena de consulta URL. El atributo ismap sólo se permite si el elemento es descendiente del elemento con un atributo href válido. Sintaxis: ismap.
   largodesc	Una URL de descripción de imagen extendida que complementa el atributo alt. Sintaxis: longdesc="http://www.example.com/description.txt" .
   src	El atributo src especifica la ruta a la imagen. Sintaxis: src="flor.jpg" .
   tamaños	Establece el tamaño de la imagen según las opciones de visualización. Funciona solo cuando se especifica el atributo srcset. El valor del atributo es una o más cadenas, separadas por comas.
   conjunto de caracteres	Crea una lista de fuentes de imágenes que se seleccionarán según la resolución de la pantalla. Puede usarse junto con o en lugar del atributo src. El valor del atributo es una o más cadenas, separadas por comas.
   mapa de uso	El atributo usemap especifica la imagen como un mapa de imagen. El valor debe comenzar con el símbolo #. El valor está asociado con el valor del nombre de la etiqueta o el atributo de identificación.
   ancho	El atributo de ancho especifica el ancho de la imagen en px. Sintaxis: ancho="500" .

   1.1. Dirección de imagen

   La dirección de la imagen se puede especificar completa (URL absoluta), por ejemplo:
   URL(http://anysite.ru/images/anyphoto.png)

   O a través de una ruta relativa desde documento o directorio raíz sitio web:
   url(../images/anyphoto.png) - ruta relativa desde el documento,
   url(/images/anyphoto.png): ruta relativa desde el directorio raíz.

   Esto se interpreta de la siguiente manera:
   ../ - significa subir un nivel, al directorio raíz,
   imágenes/ - ir a la carpeta con imágenes,
   anyphoto.png: apunta a un archivo de imagen.

   1.2. Dimensiones de la imagen

   Sin configurar las dimensiones de la imagen, el dibujo se muestra en la página en su tamaño real. Puede editar las dimensiones de la imagen utilizando los atributos de ancho y alto. Si sólo se especifica uno de los atributos, el segundo se calculará automáticamente para mantener las proporciones de la imagen.

   1.3. Formatos de archivos gráficos

   formato JPEG (Joint Photographic Experts Group). Las imágenes JPEG son ideales para fotografías y pueden contener millones de colores diferentes. Las imágenes se comprimen mejor que los GIF, pero el texto y las áreas grandes de color sólido pueden aparecer borrosos.

   formato gif (Formato de gráficos intercambeable). Ideal para comprimir imágenes que tienen áreas de color sólido, como logotipos. Los GIF le permiten configurar uno de los colores para que sea transparente, lo que permite que el fondo de una página web se muestre a través de parte de la imagen. Los archivos GIF también pueden incluir animacion sencilla. Las imágenes GIF contienen sólo 256 tonos, lo que hace que las imágenes parezcan manchadas y con colores poco realistas, como carteles.

   formato PNG (Gráficos de red portátiles). Incluye las mejores características de los formatos GIF y JPEG. Contiene 256 colores y permite hacer transparente uno de los colores, mientras comprime las imágenes en un tamaño más pequeño que un archivo GIF.

   formato APNG (Gráficos de red portátiles animados). Un formato de imagen basado en el formato PNG. Le permite almacenar animaciones y también admite transparencia.

   formato SVG (Gráficas vectoriales escalables). Un dibujo SVG consta de un conjunto de formas geométricas descritas en formato XML: línea, elipse, polígono, etc. Se admiten gráficos estáticos y animados. El conjunto de funciones incluye varias transformaciones, máscaras alfa, efectos de filtro y la posibilidad de utilizar plantillas. Las imágenes SVG se pueden cambiar de tamaño sin perder calidad.

   formato BMP (Imagen de mapa de bits). Es una imagen rasterizada sin comprimir (original) cuya plantilla es una cuadrícula rectangular de píxeles. Un archivo de mapa de bits consta de un encabezado, una paleta y datos gráficos. El encabezado almacena información sobre la imagen gráfica y el archivo (profundidad de píxel, alto, ancho y número de colores). La paleta se indica únicamente en aquellos archivos de mapa de bits que contienen imágenes de paleta (8 bits o menos) y no constan de más de 256 elementos. Los datos gráficos representan la imagen misma. La profundidad de color en este formato puede ser 1, 2, 4, 8, 16, 24, 32, 48 bits por píxel.

   formato ICO (icono de Windows). Formato de almacenamiento de iconos de archivos en Microsoft Windows. Además, el icono de Windows se utiliza como icono en sitios web de Internet. Es una imagen de este formato que se muestra junto a la dirección del sitio web o al marcador en el navegador. Un archivo ICO contiene uno o más iconos, cuyo tamaño y color se pueden configurar por separado. El tamaño del icono puede ser de cualquier tamaño, pero los más comunes son los iconos cuadrados con lados de 16, 32 y 48 píxeles.

   2. Etiqueta

   Etiqueta

   La etiqueta tiene un atributo de nombre disponible, que especifica el nombre del mapa. El valor del atributo de nombre para la etiqueta.

   

   Elemento

   3. Etiqueta

   Etiqueta describe sólo una región activa como parte de un mapa de imagen del lado del cliente. El elemento no tiene etiqueta de cierre. Si un área activa se superpone a otra, se implementará el primer enlace de la lista de áreas.

   Tabla 2. Atributos de etiqueta

   Atributo	Breve descripción
   alternativo	Establece texto alternativo para el área del mapa activo.
   coordenadas	Determina la posición del área en la pantalla. Las coordenadas se especifican en unidades de longitud y están separadas por comas: Para círculo— coordenadas del centro y radio del círculo; Para rectángulo— coordenadas de las esquinas superior izquierda e inferior derecha; Para polígono— coordenadas de los vértices del polígono en el orden requerido; también se recomienda indicar las últimas coordenadas, iguales a las primeras, para completar lógicamente la figura.
   descargar	Complementa el atributo href y le dice al navegador que el recurso debe cargarse en el momento en que el usuario hace clic en el enlace, en lugar de, por ejemplo, tener que abrirlo primero (como un archivo PDF). Al especificar un nombre para un atributo, le estamos dando un nombre al objeto cargado. Está permitido utilizar un atributo sin especificar su valor.
   href	Especifica la URL del enlace. Se puede especificar una dirección de enlace absoluta o relativa.
   hreflang	Especifica el idioma del documento web asociado. Sólo se utiliza junto con el atributo href. Los valores aceptados son una abreviatura que consta de un par de letras que indican el código de idioma.
   medios de comunicación	Determina para qué tipos de dispositivos se optimizará el archivo. El valor puede ser cualquier consulta de medios.
   rel	Expande el atributo href con información sobre la relación entre el documento actual y el relacionado. Valores aceptados: alternativo: enlace a una versión alternativa del documento (por ejemplo, formulario impreso páginas, traducción o espejo). autor: enlace al autor del documento. marcador: URL permanente utilizada para marcadores. ayuda: enlace para ayudar. licencia: enlace a la información de derechos de autor de este documento web. siguiente/anterior: indica la relación entre URL individuales. Gracias a este marcado, Google puede determinar que el contenido de estas páginas está relacionado en una secuencia lógica. nofollow - prohíbe buscador siga los enlaces de esta página o un enlace específico. noreferrer: indica que al seguir un enlace, el navegador no debe enviar un encabezado de solicitud HTTP (Referrer), que registra información sobre de qué página proviene el visitante del sitio. captación previa: indica que el documento de destino debe almacenarse en caché, es decir, navegador en fondo carga el contenido de la página en su caché. búsqueda: indica que el documento de destino contiene una herramienta de búsqueda. etiqueta: especifica la palabra clave para el documento actual.
   forma	Especifica la forma del área activa en el mapa y sus coordenadas. Puede tomar los siguientes valores: rect - área activa rectangular; círculo — área activa en forma de círculo; poli: área activa en forma de polígono; predeterminado: el área activa ocupa toda el área de la imagen.
   objetivo	Especifica dónde se descargará el documento cuando se haga clic en el enlace. Acepta los siguientes valores: _self — la página se carga en la ventana actual; _blank: la página se abre en una nueva ventana del navegador; _parent: la página se carga en el marco principal; _top: la página se carga en la ventana completa del navegador.
   tipo	Especifica el tipo MIME de los archivos de enlace, es decir. extensión de archivo.

   4. Ejemplo de creación de un mapa de imágenes.

   1) Marque la imagen original en áreas activas de la forma deseada. Las coordenadas de las áreas se pueden calcular utilizando un programa de procesamiento de fotografías, por ejemplo, Adobe Photoshop o Pintar.

   Arroz. 1. Ejemplo de marcado de imágenes para crear un mapa.

   2) Establezca el nombre de la tarjeta agregándola a la etiqueta

   Jpg" alt="flores_foto" width="680" height="383" usemap="#flowers"> !}
   Arroz. 2. Un ejemplo de creación de un mapa de imágenes, cuando haces clic con el cursor del mouse en una flor, accedes a una página con una descripción.