Работу выполнил: Пергаев роман

Задание на тему: Разделение цветом. Включение элементов графики в веб-страницу.

Работу выполнил: Пергаев роман

Назвать, применяемые в Интернете графические форматы. Для чего они применяются?

Формат GIF Новости

Формат GIF предназначен в основном для “рисованных” изображений: чертежей, графиков и т. д. В нем используется так называемая индекси-рованная цветовая палитра. Максимальное количество цветов в ней — 256. Так что не стоит сохранять в формате GIF, например, многоцветные фотографии — размер файла останется довольно большим, а качество изображения заметно ухудшится за счет уменьшения количества цветов. Зато файлы, содержащие много одноцветных точек, расположенных рядом, сжимаются с помощью формата GIF до небольших размеров. Кроме того, формат GIF имеет еще ряд достоинств.

Во-первых, GIF-рисунок может быть “прозрачным”. То есть, можно один цвет удалить из палитры GIF, определив его как прозрачный. Тогда при отображении, сквозь точки, окрашенные в этот цвет, на рисунке будет виден фон веб-страницы. Это очень помогает при создании рисунков фигурной формы. Например, этим приемом можно поместить на веб-страницу круглую фотографию. На самом-то деле она, конечно, прямоугольная, просто края ее сделаны прозрачными.

Однако дело здесь не в HTML-коде, а в GIF-файле. Цвет в его углах объявлен как прозрачный, и в результате мы можем видеть “сквозь него” фон странички, так что создается впечатление, фотография действительно круглая. Этим приемом иногда оживляют “прямоугольный” мир компьютерных окон...

Другое достоинство GIF-рисунков — возможность загружать их чересстрочным методом. Если графический файл имеет большой размер и грузится из Интернета долго, пользователь увидит сначала как бы нечеткие контуры будущего рисунка, а по мере загрузки изображение будет постепенно “проявляться”, что достигается очень простым приемом — изменением порядка загрузки строк изображения. Для этого необходимо при сохранении GIF-файла не забыть включить режим Interlaced (Чересстрочный).

И, наконец, еще одно достоинство GIF-файлов — они могут содержать не только статичные рисунки, но и целые анимационные фрагменты! На самом деле эти фрагменты представляют собой последовательности нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен задерживаться на экране. Для создания подобных анимаций существуют специальные программы, например WWW Gif Animator (рис. 3.7). В такую программу можно загрузить несколько графических файлов подряд, а также использовать некоторые встроенные эффекты. Однако помните, что каждый лишний кадр ведет к увеличению размера файла, и если сделать анимированный GIF-файл, например из 500 кадров, очень мало кто сможет дождаться окончания его загрузки.

Формат JPEG

Этот формат предназначен для изображений типа фотографий. Файлы этого формата не ограничены палитрой из256 цветов, при желании они могут содержать до 16 777 216 (то есть 224) цветов.

Процесс сжатия по схеме JPEG состоит из нескольких шагов. На первом шаге производится преобразование изображения из цветового пространства RGB в пространство YUV, основанное на характеристиках яркости и цветности. Вся дальнейшая работа

производится именно с этим цветовым пространством, которое благодаря некоторым своим характеристикам позволяет получать нам столь большие степени сжатия.

Что же такого необычного в YUV представлении цвета по сравнению с RGB? А то, что оно наиболее близко к "естественному", тому, которое неосознанно выполняет человек. Y-компонента, или яркость, тесно связана с качеством картинки. Точнее сказать, Y - это и есть картинка, только чёрно-белая. Компоненты U и V содержат информацию о цвете и позволяют нам раскрашивать Y-картинку.

На следующем после преобразования шаге изображение разделяется на квадратные участки размером 8х8 пикселей. После этого над каждым участком производится т.н. дискретное косинус-преобразование (ДКП). При этом выполняется анализ каждого блока, разложение его на составляющие цвета и подсчёт частоты появления каждого цвета.

Анализируя частотную информацию о появлении цветов, удаётся избавиться от части информации уже в процессе квантования. При этом цвета в верхней части спектра исключаются, что практически не сказывается на зрительном восприятии образа. Также исключается часть яркостной информации. Грубо говоря, JPEG просто отбрасывает от яркостной составляющей половину полезного сигнала, а от цветовой - 3/4. Это, конечно, примерно, т.к. существуют градации и более сложные схемы сжатия.

Количество информации, исключаемой при сжатии, зависит от требуемого качества изображения. При максимально-высоких уровнях сжатия детали полностью стираются, и блок становится серым. При средних и низких уровнях сжатия в файле сохраняется примерная информация о цвете данного участка. Величина этой "примерности" напрямую зависит от степени сжатия. И это нужно понять, что в отличие от обычных форматов, сохраняющих изображение поточечно, JPEG сохраняет примерные цвета. Если говорить научным языком, то JPEG использует для сохранения ряды Фурье и при больших степенях сжатия просто отбрасывает члены ряда высшего порядка. И каждый раз при воспроизведении изображения на экране компьютер производит синтез. Причём достаточно ресурсоемкий и заметный на медленных компьютерах. Из этого следует одно замечание - если Вы сохранили какой-нибудь рисунок в формате JPEG, то восстановить его обратно до последнего пикселя невозможно! Именно из-за этого формат называется "форматом с потерями", и именно поэтому не рекомендуется пересжимать JPEG-изображения, т.к. они обязательно станут хуже. А если это сделать 10 раз?

Информация о яркости и цвете затем кодируется так, что сохраняются только отличия между соседними блоками. В результате блоки представляются строками чисел, которые можно сжимать дальше. Поскольку в результате обработки блоки содержат много нулей, последняя стадия кодирования (выполняемая по алгоритму Хаффмана - подобного тому, что применяется в архиваторах) даёт хорошие результаты. Отсюда ещё небольшое

Таким образом, первоначальные 24 бита на элемент изображения или 1536 бит (192 байта) на блок превращаются в горстку бит, которые описывают зрительные характеристики всего участка изображения.

При сохранении JPEG-файла любая графическая программа просит указать степень сжатия, которую обычно измеряют в некоторых условных единицах от 1 до 100 (иногда от 1 до 10). При этом большее число соответствует меньшей степени сжатия, но лучшему качеству. И здесь важно найти хороший баланс. В большинстве случаев сжатие порядка30-40% дает вполне качественный результат.

Формат PNG.

PNG (произносится как «пинг») — аббревиатура словосочетания Portable Network Graphics. Как видно из названия, этот формат предназначен специально для передачи изображений по сетям.

Неофициально PNG расшифровывают как «PNG's Not GIF» — «PNG — это не GIF». Создан он был специальным комитетом, состоявшим из 23 человек, возглавлял который Томас Бутелл. Разработчики, среди которых было много «идейных» врагов GIF, ставили своей целью создать новый графический формат, который включал бы все лучшее формата GIF, был бы лишен его недостатков и мог бы полностью вытеснить его с места основного формата графики для WWW.

Спецификация 1.0 формата PNG выглядит впечатляюще: как и GIF, новый формат поддерживает сжатие без потерь (то есть без ущерба качеству изображения), чересстрочность (interlacing), прозрачность цвета (transparency), хранение пользовательских данных (например, комментариев). Но, в отличие от GIF, он может сохранять truecolor-изображения с глубиной цвета до 48 бит на пиксель (GIF, как вы знаете, ограничен всего 8 битами на пиксель), изображения в шкале серого цвета с глубиной до 16 бит на пиксель, поддерживает альфа-канал и гамма-индикатор. Кроме того, PNG может использоваться абсолютно бесплатно, а вот разработчики программ, использующих формат GIF (читающих и записывающих файлы в этом формате), должны заплатить за лицензию фирмы Unisys, владеющей правами на алгоритм сжатия LZW, примененный в GIF.

Правда, PNG 1.0 не может хранить несколько изображений в одном файле и, следовательно, анимация, одна из самых привлекательных черт формата GIF, в PNG пока не доступна. Но, как любят говорить сторонники PNG, именно «пока»: PNG — очень

перспективный формат (примерно как Linux — очень перспективная операционная система), и поэтому в будущем недостатаки PNG обязательно будут устранены.

В настоящее время отображение картинок в формате PNG поддерживают все браузеры из первой тройки лидеров рынка: MS Internet Explorer, Netscape Navigator и Opera. Читать и сохранять PNG-файлы умеют все более-менее нормальные графические редакторы.

Если вы попробуете сохранить файл в формате PNG, то графический редактор сначала покажет окно с опциями изображения — Adam7, Sub, Up, Path, Average и др. Думаю, нужно пояснить их назначение.

Загадочный термин Adam7 обозначает алгоритм черессторчности изображения (впрочем, других схем чередования строк в PNG не применяется), названный так в честь его изобретателя Адама М. Костелло (цифра 7 указывает на число проходов, за которые изображение «проявляется» на экране). В отличие от схемы чересстрочности формата GIF, где вместо последовательной записи строк (1, 2, 3, 4, 5…) применяется запись строк в порядке 0, 8, 9, 2, 10, 5, за первые шесть проходов схемы Adam7 на экран выводятся строки с четными номерами, а за последний, седьмой — нечетные строки. При такой схеме изображение появляется на экране сначала в виде квадратов 8x8, затем — прямоугольников 8x4, потом — квадратов 4x4, после этого — прямоугольников 4x2 и т.д. По сравнению с чересстрочной схемой формата GIF схема Adam7 значительно ускоряет»поэтапный» вывод изображения на экран, и кроме того, позволяет распознать воводимую картинку после фактического получения 20-30% информации из файла (у GIF этот параметр находится на уровне 50%).

Термины Sub, Up, Average и Path обозначают различные фильтры, которые повышают эффективность метода сжатия Deflate, используемого в PNG (а также, кстати, в известном архиваторе pkzip). Фильтры эти никаким образом не ухудшают качество изображения, так как при открытии PNG-файла, например, браузером для отображения картинки на WWW-странице, производится обратное восстановление изображения в «нефильтрованном» виде.

Фильтры применяются не к пикселям, а к байтам пикселей строки развертки (уж извините за использование специальной программистской терминологии). Так, фильтр Sub отмечает разность между значением байта в текущем пикселе и значением в том же байте предыдущего пикселя (аналогичный алгоритм применяется в формате TIFF); фильтр Up фиксирует разность байтов пикселей, расположенных в соседних строках (т.е. по вертикали); фильтр Average сохраняет разность между значениями байтов текущего пикселя и байтов пикселей, расположенных под текущим пикселем и слева от него. И, наконец, фильтр Path вычисляет значение с помощью линейной функции. Подозреваю, что я зря расписал здесь отличия между алгоритмами фильтров: разница между файлами одинаковых изображений, записанными с различными фильтрами, составляет максимум полпроцента; «чемпионом» же, по моему опыту, является фильтр Up, выдающий самые компактные файлы.

В формате GIF файл картинки слева занимает 1,9 Кбайт, в формате PNG — 1,2 Кбайт. Выигрышу в 37%, однако, радоваться не стоит. Вертикальные линии, из которых состоит первое изображение — слабое место формата GIF, а вот картинки с горизонтальными линиями, напротив, сжимаются очень хорошо. Например, объем файла изображения справа в формате GIF составляет 600 байт, а в формате PNG — те же 1,2 Кбайт. Если же

попробовать сохранить в обоих форматах не какие-то там зеброобразные тестовые картинки, а реальный логотип, например, такой:

получим файлы объемом 3,412 (GIF) и 3,448 (PNG) Кбайт. Как видите, PNG и здесь, хотя и ненамного, уступил GIF.

Но, может быть, формат PNG может хорошо показать себя там, где GIF'у точно ничего не светит — в области сохранения многоцветных (более 256 цветов) изображений? Посмотрим. Берем такую вот картинку (в оригинале — 400x250, 24 бита):

и сохраняем ее в форматах JPEG и PNG. JPEG-файл с 40%-компрессией (заметно некоторое ухудшение качества) занимает на диске 39 Кбайт, 30% (ухудшение качества заметно только при тщательном сравнении оригинала и копии) — 46 Кбайт.

Конечно, эти игры со степенями сжатия тут некорректны, так как PNG сжимает изображения без потери качества. Хорошо: JPEG, потеря качества 0%, результат — 115 Кбайт. А вот сохранение картинки в формате PNG порождает файл объемом 190 Кбайт! Никакими ссылками на «особенности конкретного изображения» или «кривизной программного обеспечения» нельзя оправдать увеличение размера картинки более чем на 50%.

Компоновка страницы сайта.

Веб-страница фактически рассматривается как набор прямоугольных блоков, которые выкладываются в определенном порядке. При этом, как правило, данные располагаются по колонкам, поэтому при верстке применяют термин одно-, двух-, трехколонный макет.

Компоновка страниц сайта должна обеспечивать автоматическое масштабирование страниц в зависимости от ширины рабочего поля браузера пользователя. Минимальный размер (ширина) рабочего поля браузера, при котором необходимо обеспечить полноценное отображение страниц (без полосы горизонтальной прокрутки), составляет 1024 пиксела.

Цветовое решение сайта.

Цвет один из самых неоднозначных элементов веб-дизайна. Цвет может подчеркнуть контекст, а может и оттолкнуть. Успех сайта во многом зависит от выбранной цветовой гаммы. Исследователями в области юзабилити и веб-дизайна отмечено, что первое впечатление от информационного Интернет- ресурса складывается на основе колористической композиции, и именно она сохраняется в памяти пользователя, а не информационный контент.

Для создания эффективного дизайна необходимо учитывать ряд требований налагаемых на выбор цветового решения:

• яркость, тон и насыщенность цвета должны соответствовать фирменному стилю сайта;

• подбор цвета делается с учетом ориентировки на аудиторию этого ресурса;

• количество используемых основных цветов по возможности не должно превышать трех;

• цвета, используемые на сайте должны взаимодействовать и гармонировать между собой;

• употребление цвета должно отвечать элементарным правилам логики;

• отдельным пунктом стоит выделить подбор цвета для текста. Фон и текст страницы должны быть оформлены контрастными цветами. Наилучшая разборчивость обеспечивается при использовании черных символов на белом фоне. Текст не должен сливаться с фоном, а заголовки теряться.

• необходимо что бы цветовое решение соответствовало форме подачи материала, его содержанию, аудитории сайта.

Оптимизация графики Web, подготовка изображений для Web-страницы. Принципы работы с картинками.

Использование графики должно быть оправданным, графика должна четко соответствовать содержанию сайта. Переизбыток графики и анимации отвлекает от основного содержания, переключая внимание посетителей сайта, затрудняет загрузку страницы.

Сайт должен загружаться быстро, а графика занимает основной объем трафика веб-страниц. Одна фотография в килобайтах занимает место в десятки раз большее, чем лист текста A4. Графика обязательно должна быть оптимизирована! Следует использовать повторяющиеся изображения, так как компьютер сохраняет один раз загруженные файлы во временных папках для экономии времени загрузки. Повторяющимся изображением может служить «шапка» сайта на всех его страницах.

Если необходимо разместить большие изображения – можно сделать так, чтобы они открывались программным способом по дополнительному клику в новом окне браузера. Но по умолчанию сайт должен быть легким.

Среднее время загрузки страниц не должно превышать 30 секунд при скорости соединения 28.8 Кбит/сек. Допускается увеличение времени загрузки отдельных страниц до 35 секунд, но не более чем 30% общего числа страниц сайта. Главная страница должна иметь время загрузки не более 40 секунд

На WEB странице можно использовать графические файлы форматов JPG, GIF и PNG. GIF -специальный сетевой формат: имеет малый размер файла, возможность плавного проявления и анимации, а также эффект прозрачности, позволяющие использовать картинку как "обои" на странице или в таблицах. Но т.к. gif содержит 256 цветную палитру, он неэффективен для хранения фотографий. JPG напротив не имеет ограничений по глубине цвета, но также и возможности анимации. Новый формат файлов поддерживающий и глубину и прозрачность -PNG, имеет недостаток в том, что старые браузеры его не видят. Поэтому, если не брать во внимание пользователей устаревшими программами, пинги вполне можно включать в свои страницы. Чтобы включить в страницу рисунок, надо описать ссылку на него:

<IMG SRC="Image">

где SRC (от source -источник)=Image -файл в формате gif, jpg или png, содержащий рисунок. Вы можете задавать взаимное расположение рисунка и текста включением атрибута align = " ":

Возможны следующие типы выравнивания: align = "middle" - относительно центра строки align = "left" -текст обтекает картинку справа align = "right"- то же слева

При использовании выравнивания left или right можно включить в тег img дополнительный параметр отступа вокруг изображения, чтоб картинка не прижималась вплотную к Вашему тексту. Параметр VSPACE="n" - создает отступ по вертикали, а HSPACE="n" - по горизонтали на n пиксел. Таким

образом, правильно написанный тег картинки с обтекающим справа текстом будет выглядеть так:

<img src="lego.gif" align="left" height="90" vspace="10" hspace="35" alt="Новый пример" border="1"> Text.

Последний параметр- ширина бордюра. Если он присутствует без значения, а просто в виде слова BORDER то бордюр нарисуется браузером по собственному желанию, а если как в примере, то значение обозначает его ширину. Нулевое значение этого параметра используется если файл служит графической гиперссылкой, для ее маскировки.

Структура ссылки

Гиперссылки создаются с помощью парного тега <a></a>. Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.

Обязательным параметром тега <a> является атрибут href, который задает URl-адрес веб-страницы.

<a href="http://site.ru">указатель ссылки</a>

HTML

Ссылка состоит из двух частей — указателя и адресной части. Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя. Адресная часть ссылки пользователю не видна, она представляет собой адрес ресурса, к которому необходимо перейти.

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

метод доступа://имя сервера:порт/путь

HTML

Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:

file обеспечивает чтение файла с локального диска:

file:/gallery/pictures/summer.html

HTML

http предоставляет доступ к веб-странице по протоколу HTTP:

http://site.ru/

HTML

https — специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)

https://site.ru/

HTML

ftp осуществляет запрос к FTP-серверу на получение файла:

ftp://pgu/directory/library

HTML

mailto запускает сеанс почтовой связи с указанным адресатом и хостом:

mailto: [e-mail]

HTML

Имя сервера описывает полное имя машины в сети, например, site.ru. Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.

Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются: 21 — FTP 23 — Telnet 70 — Gopher 80 — HTTP

Путь содержит имя папки, в которой находится файл.

Абсолютный путь

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со

сторонних ресурсов и содержит следующие компоненты: 1) протокол, например, http (опционально); 2) домен (доменное имя или IP-адрес компьютера); 3) папка (имя папки, указывающей путь к файлу); 4) файл (имя файла).

Существует два вида записи абсолютного пути — с указанием протокола и без него:

http://site.ru/pages/tips/tips1.html

//site.ru/pages/tips/tips1.html

HTML

Если файл находится в корневой папке, то путь к файлу будет следующим:

http://site.ru/index.html

HTML

При отсутствии имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера (так называемый индексный файл).

http://site.ru/

HTML

Обычно в качестве индексного файла выступает документ с именем index.html. Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.

2.2. Относительный путь

Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http://, он выполняет поиск указанного документа на том же сервере.

Относительный путь содержит следующие компоненты: 1) папка (имя папки, указывающей путь к файлу); 2) файл (имя файла).

Путь для относительных ссылок имеет три специальных обозначения: / указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки./ указывает на текущую папку../ подняться на одну папку (директорию) выше

Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный

адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.

Якоря

Якоря, или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега <a> с разницей в том, что атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес. Перед именем указателя всегда ставится знак #.

Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:

<h1>Времена года</h1>

<h2>Оглавление</h2>

<a href="#p1">Лето</a> <!--создаём якорь, указав #id элемента-->

<a href="#p2">Осень</a>

<a href="#p3">Зима</a>

<a href="#p4">Весна</a>

<p id="p1">...</p> <!--добавляем соответствующий id элементу-->

<p id="p2">...</p>

<p id="p3">...</p>

<p id="p4">...</p>

HTML

Если нужно сделать ссылку с одной страницы сайта на определенный раздел другой страницы, то необходимо задать id для этого раздела страницы, а затем добавить его к абсолютному адресу ссылки:

<th id="about-color">color</th>

<a href="https://html5book.ru/css-shrifty/#about-color" class="site" target="_blank">color</a>

HTML

Задание на тему: Разделение цветом. Включение элементов графики в веб-страницу.

Работу выполнил: Пергаев роман