|
|
|
>>> Перейти на мобильный размер сайта >>> Учебное пособие Создание сайта
Создание графических элементов для сайтаПроблемой номер один создания графики для сайта является размер файла и суть в том, что самая лучшая графика для веб сайта — та, которая имеет приемлемое качество изображения и небольшой размер файла. Графические форматыПри работе вы будете иметь дело прежде всего с двумя типами изображений: JPEG и GIF. Оба они являются графическими форматами со сжатием и наиболее часто используются при разработке сайтов Internet. Формат JPEG (Joint Photographic Experts Group, Объединенная экспертная группа по фотографии) — это масштабируемый упакованный формат, обеспечивающий высокую степень сжатия с очень небольшим снижением качества изображения. Для изображения в электронной форме не является необычным некоторая потеря четкости, особенно при преобразовании из одного формата в другой. Исходя из того что JPEG объединяет в себе хорошую степень сжатия и незначительную потерю качества, он является идеальным форматом для среды веб сайта, в которой изображения часто масштабируются, преобразовываются или изменяются иным образом. Формат JPEG наиболее подходит для фотографий или изображений с количеством цветов более 256. В сетевой графике большое значение имеет число битов, используемых для представления каждого цвета изображения, известное также как глубина цвета или битовая глубина (bit depth) файла. Изображения с восьмью битами цветовой информации на пиксел позволяют обеспечить 256 различных цветов. Большее количество бит означает большее количество поддерживаемых цветов. Формат GIF (Graphics Interchange Format, Формат обмена графическими данными) — это упакованный формат для изображений, содержащих 256 или менее цветов. Формат GIF обычно используется для изображений, содержащих в основном ровные цвета, например, таких, как иллюстрации. Формат GIF также поддерживает прозрачность и чересстрочное отображение. Цвета в HTML Если вы еще не очень хорошо знакомы с HTML и вам интересно, как кодируются отображаемые браузером цвета, то сейчас самое время рассмотреть этот вопрос поподробнее.
Рис. 8.1. Различные битовые глубины и соответствующее количество цветов Наверное, вы знаете, что ваш монитор для отображения цветов на экране использует цветовую модель RGB (Red, Green, Blue, Красный, зеленый, синий). Однако в HTML для задания цвета используется шестнадцатеричное представление. Вы можете спросить себя: "Зачем, собственно, мне разбираться с этими жуткими числами?" Если вы сами создаете графику и не хотите, чтобы цвета были размыты или если вы просто хотите глубже понять детали представления цвета в HTML, то все нижеследующее, несомненно, будет вам небесполезно. Так как мы уже знаем, что предпочтительно использовать 216-цветную безопасную палитру, то мы остановимся на представлении этой палитры в шестнадцатеричном виде и в RGB. В коде HTML веб страниц нередко можно встретить атрибут color. Например, если на странице есть черный текст, то этот код будет выглядеть следующим образом: <font color="#oooooo"> ... </font>. Шестнадцатеричные цвета представляют собой наборы из трех двузначных шестнадцате-ричных чисел. Каждое отдельное число соответствует значениям R, G и В, общее количество символов в наборе равно шести. Например, 000000 соответствует черному, который является отсутствием цвета. Другое крайнее значение — FFFFFF, т. е. максимальная интенсивность всех трех цветов соответствует белому цвету. В системе координат RGB черный цвет представляется последовательностью о, о, о, а белый — 255, 255, 255. Вы можете задать любую комбинацию из шести шестнадцатеричных цифр и придумать произвольный шестнадцатеричный цвет, однако для того, чтобы не выйти за пределы 216-цветной палитры, мы будем использовать комбинации из достаточно ограниченного множества значений. Настройка фонового рисунка Ниже приведено несколько советов по ускорению загрузки фоновых изображений без ущерба для их внешнего вида:
|
|
|