Графика и текст в Web
3 Графика и текст в Web
3.1 Графика в Web
Важным элементом при создании Web страницы является её графическое наполнение, которое может быть передано цветовой палитрой и изображениями. Для задания цвета используются числовые RGB-значения в диапазоне от 0 до 255. Например, значения RGB для темно-оранжевого цвета равны R:198, G:83, B:52. Существуют три системы для задания цветов. Шестнадцатеричная (3333FF); проценты (процентный эквивалент 51-51-255 равен 20-20-100 %); десятичная, в диапазоне от 0 до 255 (51-51-255, что означает значение красного – 51, зеленого – 51, голубого – 255).
Большинсво изображений, существующих в Web, представлены в трёх растровых форматах: GIF, JPEG и PNG.
Формат GIF (Grafic Interchange Format) был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным. GIF представляет собой файлы индексированных 8-разрядных цветов, что определяет максимум 256 цветов. Поскольку этот формат сжимает информацию о цветах по строкам пикселов, GIF-файлы лучше всего подходят для графики, которая содержит области равномерного цвета. Другим достоинством этого формата является возможность анимации графических изображений, состоящих из нескольких сменяющих друг друга кадров.
Формат JPEG. Вторым наиболее популярным графическим форматом в Web является JPEG (Joint Photographic Experts Group). Он содержит 24-разрядную информацию о цвете. Это миллионы цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что часть информации об изображении в процессе сжатия теряется, но в большинстве случаев ухудшение качества не заметно. В этом формате лучше всего сохранять фотографии или любые изображения с плавными градациями цветов, так как он предлагает более высокое качество изображения в файле меньшего объема. Однако JPEG не является лучшим решением для графических изображений с одноцветными областями, поскольку этот формат имеет тенденцию изменять цвета и конечный файл, будет несколько больше, чем GIF-файл для того же изображения.
Обратите внимание на лекцию "1.3 Стандартизация пользовательского интерфейса".
Формат PNG. Третий графический формат – это PNG (Portable Network Graphic), который постепенно становится очень популярным в Web. PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF за счёт использования различных алгоритмов сжатия (Selective (Селективный), Adaptive (Адаптивный) и др.) Кроме того, файлы PNG имеют функции, позволяющие показывать рисунок фона сквозь отбрасываемые мягкие тени.
3.2 Текст в Web. Два комплекта шрифтов
При создании Web страницы зарание неизвестно, как именно будет выглядеть текст на экране, поэтому используются два комплекта шрифтов:
пропорциональный шрифт (иначе «шрифт переменной ширины») для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная «W» занимает больше места в строке по горизонтали, чем прописная «I», Times, Helvetica и Arial являются примерами пропорциональных шрифтов. Большие отрывки текста удобнее читать, когда они напечатаны пропорциональными шрифтами. С большой вероятностью текст на странице будет отображен пропорциональным шрифтом Times.
шрифт с фиксированной шириной (также известный, как шрифт «постоянная ширина» или «равноширииный») предоставляет одинаковое место для всех символов шрифта. Заглавная «W» занимает столько же места, что и прописная «I», Примерами шрифтов фиксированной ширины являются Courier и Monaco.
Другим надёжным способом представления текстовой информации является его оформление в виде графического изображения. При этом страница состоит из множества графических элементов, содержащих заголовки, подзаголовки и объявления. Многие Web-страницы представлены исключительно в графике, которая содержит внутри себя весь текст страницы. При этом страница одинакова при выводе во всех графических браузерах. Однако следует учитывать, что при этом изображения загружаеются дольше, чем текст, а в неграфических браузерах содержание утрачивается.
