Графика и трафик
Требования к красоте и выразительности оформления Web-страниц находятся в постоянном противоречии с техническими возможностями современного Web-хостинга. Поэтому проектировщик сайта должен стать посредником между дизайнером и пользователем и строго выдерживать равновесие между визуальной привлекательностью и разумной скоростью доставки информации в Сети. Чтобы успешно решать эту проблему, необходимо знать все используемые в Интернете графические форматы, понимать различия между ними, области применения и особенности использования.
Чтобы разобраться с большим количеством форматов и протоколов, принятых в Интернете, и построить собственную страницу, необходимо отобрать то, что является самым подходящим для ваших конкретных целей. Некоторые форматы могут быть специфичны только для одного браузера, а другие потребуют специального внешнего модуля. Мы выбрали из всего многообразия форматов только те, которые наиболее часто используются авторами популярных сайтов и принимаются пользователями.
GIF и JPEG - это два наиболее популярных графических формата, которые давно стали фактическими стандартами для использования на WWW. Оба достаточно универсальны, читаются большинством браузеров и не требуют специального программного обеспечения (или дополнительных модулей). GIF и JPEG - растровые форматы изображения, что, соответственно, определяет фиксированный формат (разрешение) при отображении таких картинок на экране. При попытке масштабирования (предусмотренного в некоторых браузерах) растровые (пиксельные) изображения значительно теряют в качестве. Для 8-разрядного (256-цветового) формата GIF, кроме того, серьезной проблемой является выбор цветовой палитры.
Векторные графические форматы значительно более привлекательны для использования в Сети. В отличие от точечных рисунков векторная графика основана на математическом (геометрическом) представлении данных. Такие изображения значительно меньше по объему хранения/передачи, легко масштабируются и практически не теряют в качестве при любых преобразованиях. К сожалению, векторные форматы еще малоупотребимы в Интернете, но стандарты уже сформированы и должны заинтересовать проектировщиков.
Несколько векторных стандартов было предложено сравнительно недавно, а форматы PGML и VML в настоящее время рассматриваются консорциумом W3C (World Wide Web Consortium). Однако фирма Macromedia, продвигающая VML, давно открыла свой векторный формат Shockwave Flash другим разработчикам и реализовала дополнительные модули для просмотра графики в этом формате для популярных браузеров.
Однако не для всех применений новые средства - обязательно лучшие. Самыми распространенными изображениями, публикуемыми в Интернете, до сих пор являются цифровые фотографии, рисунки и отсканированные картинки, которые весьма трудоемко, да и вряд ли целесообразно переводить в векторный формат.
Поэтому выбор формата в конечном счете зависит от ваших задач, и то, какие изображения больше соответствуют вашей целевой аудитории, решать только вам.
GIF - формат для дизайна
Фирма CompuServe первоначально предназначала свой формат GIF для интерактивных приложений в условиях ограниченных возможностей стандартной графики на персональном компьютере. Это был изначально 4-, а затем и 8-разрядный растровый формат с заданием цветовой палитры, который поддерживал максимум 256 цветов. Одно из существенных преимуществ формата - то, что изображения могут быть индексированы к определенной палитре (набору цветов), в то время как JPEG-изображения не могут «привязываться» к палитре и их «правильное» отображение не всегда возможно. Это свойство особенно важно для тех разработчиков, которые используют индексацию палитры, чтобы оптимизировать передачу изображений для всех без исключения платформ (будь то PC, Mac, Web-TV или другие), независимо от того, с какой глубиной цвета работает та или иная система. Добиться подобной универсальности позволяет ограниченная палитра в 216 цветов, которая включает все общие цвета, используемые как в Windows, так и, например, в MacOS. Проектирование сайта в универсальной палитре гарантирует непротиворечивое, кроссплатформное и не зависящее от используемого оборудования отображение. Кроме того, GIF-формат использует схему сжатия без потерь (с простым алгоритмом кодирования повторов: последовательность байтов одного цвета заменяется на слово из двух байтов, один из которых содержит образец закраски, а второй определяет количество повторений), так что графические данные в этом формате не теряют информации в процессе сжатия и восстановления.
Однако именно из-за таких встроенных цветовых ограничений формат GIF может применяться только для тех изображений, которые имеют ограниченное количество цветов, - типа черно-белых схем или же тех, что содержат большие области одного цвета, - типа мультипликационных кадров или цифровых рисунков с однотонной заливкой. Конечно, вы можете сохранить любое изображение в формате GIF, применив так называемое сглаживание цветовых тонов (dithering) и получить, таким образом, достаточно приличное качество, но в этом случае вы рискуете «нарваться» на значительное увеличение размера файла после применения вышеописанной компрессии с запоминанием повторов (в вырожденном случае, когда в изображении не присутствует ни одного смежного повтора, вы получите увеличение файла ровно в два раза по сравнению с некомпрессированным оригиналом).
Таким образом, основные преимущества GIF-формата - это использование сжатия без потерь и экономное сохранение сплошных областей цвета с четкой границей и строгими цветовыми переходами. Формат JPEG отличается от описываемого тем, что в зависимости от уровня сжатия сплошные области там разрушаются и резкие переходы цветов сглаживаются или размываются.
Основной критерий выбора формата GIF: если вы сами нарисовали в графическом пакете типа Photoshop или Painter картинку, которая имеет большие области одного цвета, или обработали существующее изображение и хотите сохранить высокую контрастность (необходимую, например, при отображении текста), то производите сохранение именно в этом формате (прежде всего это касается черно-белых или бедных цветом рисунков).
Для фотографий, видеокадров или других полноцветных изображений с использованием гладких цветовых переходов (градиентов) используйте формат JPEG.
Важно не забывать еще и то, что если вы пытаетесь сохранять изображения с непрерывным тоном в формате GIF, то вам, вероятно, придется отбросить так много информации в процессе подготовки изображения (при преобразовании его к фиксированной палитре), а применяемый в GIF метод компрессии окажется настолько неэффективным, что вы проиграете еще и материально (и по трудозатратам, и по объему файла).
Кроме всего прочего в формате GIF предусмотрено так называемое чересстрочное появление (Interlaced), которое помогает пользователям с медленными каналами в самом начале приема оценить содержание картинки (эффект похож на постепенную прорисовку нерезкой картинки) и время, необходимое на ее полную передачу, и в результате принять решение, стоит ли продолжать прием или лучше от него отказаться. Впрочем, в отличие от прогрессивного JPEG здесь эффект, скорее, психологический, нежели реальный (см. рис.).
Также следует помнить об одном важном преимуществе GIF-формата, без которого в некоторых случаях невозможно обойтись даже при всех его недостатках, - это поддержка прозрачности (расширение GIF89a), которая дает возможность отображать силуэт с непрямоугольными контурами на уже существующем фоне. Прозрачность в формате GIF реализована примитивно - один цвет (обычно фоновый) назначается прозрачным. Это преимущество часто используется при создании кнопок и пиктограмм при оформлении страницы (JPEG не предлагает никакой поддержки прозрачности).
В заключение можно сказать следующее: GIF - наилучший выбор для достижения эффективного компромисса между существующим оборудованием и программным обеспечением, а возможность индексирования 8-разрядного GIF-изображения до 216 универсальных цветов имеет существенное значение, когда ваши изображения предназначаются для показа на разнообразных браузерах и неизвестных платформах.
JPEG - формат для фотографий и видеокадров
Формат JPEG получил свое название от аббревиатуры Joint Photographic Experts Group сommittee (объединенного комитета экспертов по фотографии), который и создал этот стандарт в конце 80-х - начале 90-х годов. Формат JPEG основан на алгоритме сжатия с потерями (дискретном косинусоидальном преобразовании), средствами которого ваше изображение разбивается на области (обычно это квадраты 8Ѕ8 пикселов), внутри которых распределение цветов заменяется на математическую функцию и хранятся только коэффициенты этой функции, позволяющие восстановить ее вид. Естественно, вы столкнетесь с некоторой потерей качества (в зависимости от сложности функции, применяемой для замены изображения) и после восстановления получите уже не реальную картинку, а ее математический «суррогат». Однако в зависимости от качества вашего оригинала и степени сжатия потеря качества может быть совершенно незаметна зрителю. Но главное преимущество JPEG-формата по сравнению с GIF заключается в том, что, в то время как GIF - только 8-разрядный (256-цветный), JPEG - 24-разрядный и может отображать до 16,7 млн. цветовых оттенков.
По этой причине полноцветный JPEG, естественно, воспроизводит значительно большее количество видеоинформации, чем GIF. Этот формат лучше всего подходит для изображений реальной жизни - отсканированных картинок или цифровых фотографий, а также оцифрованных видеокадров или отрендеренных сцен трехмерной компьютерной графики.
Другое преимущество JPEG заключается в следующем: в отличие от GIF он позволяет самостоятельно задавать степень сжатия, применяемого к исходному изображению, что дает возможность выдерживать необходимое равновесие между размером и качеством.
Коэффициенты сжатия изменяются для JPEG в широких пределах - в зависимости от используемой программы редактирования изображения, однако на Web-страницах обычно применяются соотношения 10:1 или 20:1 (выраженное в пропорции по объему по отношению к исходному изображению), что обычно обеспечивает приемлемое качество. Тем не менее сжимать изображение можно и до экстремальных значений 100:1 (естественно, со значительной потерей качества).
Итак, работая с фотографией в JPEG-формате, вы имеете возможность сохранить 24-разрядное изображение с 16,7 млн. цветовых оттенков, и, несмотря на потерю качества при сжатии, оно все же значительно больше соответствует оригиналу, нежели 256-цветное GIF-представление. При этом неизбежные потери качества сильно зависят от размера, качества и типа исходного изображения.
Кроме того, JPEG позволяет определять так называемое прогрессивное отображение, то есть такое, когда при загрузке на экране сразу появляется «грубое» представление картинки, которое, по мере получения дополнительной информации, постепенно улучшается (при этом вы можете получить необходимое представление о сути подаваемого материала еще до завершения загрузки и прервать процесс на любом этапе, что значительно экономит время просмотра сетевого контента).
Эти средства вы можете использовать по желанию, и подобное поэтапное проявление может стать хорошим подспорьем в борьбе с загруженностью каналов. Единственная проблема с прогрессивным JPEG (в отличие от чересстрочного GIF) состоит в том, что старые версии браузеров могут его не поддерживать.
PNG - универсальная растровая новинка
Представитель следующего поколения растровых форматов, PNG, взял лучшие свойства и от JPEG, и от GIF и добавил свой, уникальный подход к подаче изображения, который дает возможность встроить в один файл различные версии того же самого изображения для низкого, среднего и высокого разрешений.
Формат PNG (Portable Network Graphics) - относительно новый растровый графический формат, который был одобрен как стандарт консорциумом W3C и должен постепенно заменить оба «устаревших» формата: как GIF, так и JPEG. PNG предлагает и цветовую индексацию (до 256 цветов), и поддержку как 24-, так и 48-разрядного цвета (True-Color), и работу с каналом прозрачности (альфа-каналом), к тому же он значительно более эффективен, чем традиционные форматы хранения растровых изображений.
Алгоритм сжатия для полноцветной картинки превосходит JPEG по качеству, а при поддержке ограниченной индексированной палитры (до 256 цветов) новый формат осуществляет компрессию без потерь на 10-30% лучше, чем та, которая реализована в GIF-формате, что делает его оптимальным для использования в любых случаях. К сожалению, новый формат не позволяет жертвовать качеством изображения в обмен на более высокую степень сжатия, как в формате JPEG.
Поддержка прозрачности в формате PNG в отличие от GIF - полноценная, то есть вы можете строить и полупрозрачные изображения или границы, поэтому проблема «чистых» границ, так трудно решаемая при использовании прозрачности в GIF-файле, здесь легко преодолима.
Однако, несмотря на все усовершенствования, предлагаемые в PNG, новый формат «заживет» только после того, как к нему обратятся проектировщики Web-сайтов и производители программного обеспечения как для визуализации изображений в новом формате, так и для подготовки их для публикации. А пока довольно трудно найти PNG-изображения где-нибудь в Интернете, несмотря на недавнее включение поддержки этого формата как в Netscape Navigator, так и в Microsoft Internet Explorer.
И хотя их последние версии и поддерживают PNG, они делают это весьма ограниченным способом. В настоящее время единственным решением для пользователей, которые хотят видеть полноценный PNG-файл, является самостоятельная установка внешнего модуля (подобного PNG Live).
Видимо, разработчики медлят, дожидаясь полного перехода пользователей к новым форматам. Что ж, здоровый консерватизм никогда не помешает, но все же мы настоятельно рекомендуем вам постепенно переходить к PNG, заменяя им, по крайней мере, все существующие применения GIF-формата.
Векторное представление
И JPEG, и GIF, и PNG - растровые форматы, основанные на дискретном (пиксельном, или точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Векторная графика обеспечивает значительные преимущества по сравнению с растром, особенно когда речь идет о схемах, тексте и промышленной графике (а экономичность форматов имеет огромное значение для Интернета).
Итак, первое преимущество - это значительно меньший размер векторных изображений по сравнению с точечными рисунками, потому что описывается не каждый отдельный пиксел изображения, а вся фигура целиком (например, для задания окружности необходимо передать 3-4 числа: радиус, координаты центра и, может быть, тип или толщину линии и ее атрибуты). Математические формулы, которые описывают векторное представление, занимают намного меньше места, чем индивидуальные пикселы и их атрибуты.
Другое немаловажное преимущество векторного представления - способность практически неограниченного масштабирования изображения (или детализации его частей) без каких-либо потерь в разрешающей способности или ясности изображения. Для адаптации векторного представления к той или другой палитре, платформе, оборудованию или особенностям дизайна не требуется никаких усилий; а согласование схемы сжатия и качества отображения проходит без каких-либо проблем.
Однако не всякое растровое изображение можно перевести в векторную форму (например, плохо поддаются векторизации фотографии, отсканированные картинки или растровые рисунки). Но специально подготовленные векторные рисунки (типа штриховой графики, пиктограмм, технических иллюстраций, карт, информационной графики и других, являющихся исторически векторными) просто глупо переводить в растровую форму для публикации в Интернете, что повсеместно происходит сегодня.
Проблемы с отображением векторной графики во всемирной Сети возникли оттого, что не было никакого другого способа отображения, кроме растрового, а появившийся было встраиваемый модуль для показа файлов в PDF-формате не обеспечивал должной гибкости работы и требовал хранения всего контента в одной форме - PDF.
Для обеспечения возможности органично встраивать векторную графику в традиционный HTML-формат без какого бы то ни было дополнительного программного обеспечения в настоящее время на рассмотрении комитета по стандартам W3C находятся два новых векторных стандарта: PGML (Precision Graphics Mark-up Language) и VML (Vector Mark-up Language). PGML поддерживается фирмами Adobe Systems, IBM, Netscape и Sun Microsystems, а VML - Microsoft, Hewlett-Packard, Autodesk, Macromedia и Visio. Оба стандарта основаны на расширениях языка разметки XML, пропагандируемого для применения в сети как преемника HTML и рекомендованного W3C к использованию в будущем.
Но в настоящее время ни один из браузеров не поддерживает никаких стандартов векторной графики, хотя дополнительные модули (Plug-ins) уже имеются. Среди наиболее популярных способов показа статических векторных изображений на Web сегодня можно выделить принадлежащий фирме Macromedia формат SWF (Shockwave Flash) и недооцененный пока формат Xara Flare.
Flare - хорошее решение, допускающее включение векторных изображений, которые позволяют практически неограниченно увеличивать уровень детализации страницы, при этом их размеры сравнимы с Shockwave Flash. Нельзя сказать, что применение дополнительных модулей для просмотра изображений так уж неудобно, но когда вы будете использовать подобные средства на ваших страницах, не забудьте предупредить об этом пользователя и дать ему возможность загрузить соответствующий модуль, прежде чем он перейдет к той странице, которая будет включать эти элементы. В ближайшей перспективе это, конечно, замедлит процесс просмотра для новых пользователей, но постепенно вы приобретете все больше приверженцев, пока соответствующие средства наконец не будут включены в очередную версию браузера и дополнительный модуль новичкам уже не понадобится.
Анимация, интерактивность и взаимодействие
Вообще говоря, и GIF-изображения можно оформить в виде специального стека в одном файле, и полученный «фильм» (flipbook) воспроизвести можно, создав простую растровую анимацию. И Netscape и Microsoft обеспечили поддержку «оживляемого» GIF-формата, начиная еще с третьих версий своих браузеров, так что их присутствия на Web теперь трудно избежать. Многочисленные GIF-аниматоры, позволяющие формировать подобные GIF-стеки, широко распространены (причем как коммерческие, так и общедоступные). Однако «оживление» GIF-формата может привести к неуправляемым размерам файлов, ибо каждый «уровень» такого стека - это индивидуальное GIF-изображение, так что типичные 15 кадров в секунду для компьютерной анимации могут «наплодить» несчетное число килобайтов.
В комбинации с Java или JavaScript можно создавать и интерактивную анимацию, которая будет реагировать на пользователя.
А теперь рассмотрим другие решения для Web-анимации и интерактивного взаимодействия с пользователем, причем основную роль здесь продолжает играть фирма Macromedia, давно вышедшая на рынок со своими программами Shockwave и Flash и непрерывно улучшающая свои изделия, повышая их эффективность в соответствии с запросами пользователей и проектировщиков.
Первоначально созданный как формат для Macromedia Director, Shockwave - это семейство протоколов, нацеленных прежде всего на производство интерактивного и графического содержания, создаваемого специально для использования в сети Интернет. А Shockwave Flash - это вообще уникальный инструмент и один из самых лучших способов для создания анимации и публикации ее на Web-странице. Shockwave Flash образует совсем маленькие файлы (так как использует преимущественно векторный формат представления) и по сравнению с другими форматами наиболее удобен с точки зрения подготовки.
При публикации такой анимации на ваших страницах не забудьте уведомить об этом пользователя, чтобы он заранее запасся дополнительным модулем и приготовился к томительному ожиданию загрузки. Однако последние версии - и Netscape Navigator, и Internet Explorer имеют модули просмотра для Flash-анимаций даже в базовой поставке. Фирма Netscape подтвердила, что последующие версии Navigator будут иметь такую поддержку для Flash даже на уровне кода.
Окончательное решение за вами
Итак, изменяется отношение к представлению Web-контента, появляются новые форматы данных и поддерживающие их средства разработки. Однако старые форматы (для представления графики - это GIF и JPEG) все еще достаточно популярны. Они поддерживаются практически всеми браузерами, и большинство разработчиков имеют большой опыт работы именно с ними. Важно использовать правильный формат для конкретных целей, чтобы гарантировать равновесие между качеством изображения и размерами файлов. Например, одно изображение в формате GIF может занимать больший объем и давать более низкий качественный результат, чем в формате JPEG, а для другого все будет наоборот.
Однако при представлении растровых изображений более предпочтительным становится PNG, а если вы пойдете еще дальше и попытаетесь использовать векторное изображение, то уже сегодня к вашим услугам - формат Shockwave Flash фирмы Macromedia.
Формат SWF (Shockwave Flash) - это не общеупотребительный, а внутренний векторный формат программы Flash фирмы Macromedia (см. «Уроки Macromedia Flash» на CD-ROM), поэтому для того, чтобы получить собственное изображение или анимацию, вам придется приобрести соответствующий мультимедийный пакет от фирмы Macromedia, а пользователю необходимо будет поставить дополнительный модуль для визуализации результата. Таким образом, для того чтобы просто поместить векторный рисунок на вашу Web-страницу, вам придется преодолеть целый ряд неудобств.
Тем не менее на подходе и другие векторные форматы, которые в скором времени станут стандартными.
КомпьютерПресс 5"1999
Для вставки изображения в текст Web-страницы используется одинарный тег (табл. П 1). Атрибуты этого тега задают все параметры изображения, размещаемого на странице. Обязательным является атрибут SRC, определяющий адрес и имя графического файла. Если атрибут SRC не установлен, то будет отображаться только значок пустого изображения.
Структура тега с атрибутом SRC имеет вид:
.
Если графический файл с именем Институт находится в той же папке, что и Web-страница, то для его размещения следует записать:
.
Имя файла Формат
Для размещения графического файла с именем МИНСК, нахо-дящегося по адресу D:\Коллекция\Города\ МИНСК.GIF, следует записать .
С помощью тега на Web-странице размещается графический файл, находящийся на другом компьютере в глобальной сети «Интернет».
Чтобы создать Web-страницу с фотографией нашего института, которая приведена на рис. 4.1, нужно ввести следующий HTML-код:
Наш институт
Рис. 4.1. Web-страница с фотографией института
В приведенном примере высота фотографии (HEIGHT) составляет 200 пикселей, а ширина (WIDTH) – 300 пикселей. Для размещения фотографии создается абзац с выравниванием по центру.
Горизонтальные линии
Размещение на Web-странице горизонтальных линий осуществляется с помощью одинарного тега
. С помощью атрибутов SIZE, WIDTH,COLOR и ALIGN изменяются соответственно толщина, ширина, цвет и способ выравнивания линий.
Рассмотрим несколько примеров, поясняющих размещение гори-зонтальных линий:
1.
- горизонтальная линия на всю страницу толщиной 2 пикселя.
2.
WIDTH = "200" ALIGN="RIGHT"> – горизонтальная линия зеленого цвета толщиной 15 пикселей, шириной 200 пикселей и вырав-ниванием по правому краю.
3.
– горизонтальная линия синего цвета на всю страницу толщиной 25 пикселей.
4.
WIDTH = "300" ALIGN = "LEFT"> – горизонтальная линия красного цвета толщиной 20 пикселей, шириной 300 пикселей и выравниванием по левому краю.
Отображение линий для четырех записанных примеров показано на рис. 4.2.
Рис. 4.2. Линии на Web-странице
ТАБЛИЦЫ
Создание таблиц
Создание таблицы осуществляется с помощью парного тега
в коде HTML.
Любая таблица состоит из строк, а строки – из ячеек. Для фор-мирования строк и ячеек таблицы используются следующие теги:
Эти теги записываются внутри парного тега
Формирование таблицы происходит по строкам – вначале задается одна строка и в ней указывается необходимое количество ячеек, затем вторая строка и т.д.
Для того чтобы на Web-странице получить таблицу, представленную на рис. 5.1, необходимо набрать следующий HTML-код:
| Автомобили | Цена | Форд | 5000 | Гольф | 6000 |
|---|
то толщина внешней границы будет равна 6 пикселям. Чтобы границы таблицы не отображались, необходимо атрибуту BORDER присвоить значение, равное 0, или просто этот атрибут опустить.
Графические изображения, размещенные на Web-странице, не только способствуют лучшему восприятию информации, но и позволяют сделать страницы более яркими и запоминающимися. Графические изображения вы можете подготовить сами или воспользоваться услугами дизайнеров. Можно также использовать библиотеки графических файлов программных продуктов, таких как Microsoft Office, CorelDraw и т.д.
Разместим на домашней странице создаваемого нами Web-узла графическое изображение из библиотеки Clip Art, входящей в состав Microsoft Office. Для этого выполните следующие действия:
- Откройте созданный Web-узел.
- Откройте домашнюю страницу, дважды щелкнув мышью на имени файла index.htm в панели Список папок (Folder List).
- В меню Вставка (Insert) выберите команду Рисунок Картинки (Clip Art). В окне программы FrontPage появляется панель Вставка картинки (Insert Clip Art).
- Выберите на этой панели команду Коллекция картинок (Media Gallery). Открывается диалоговое окно, позволяющее выбрать графическое изображение (рис. 15.8).
Рис. 15.8.
В верхней части диалогового окна помимо кнопок, управляющих отображением показываемых в окне объектов, а также копированием и удалением объектов, содержатся кнопки назначения (см. таблицу).
- Панель Список коллекций содержит папки вашего компьютера с мультимедийными файлами, а также файлы картинок библиотеки Clip Art. Откройте папку интересующей вас категории картинок. В рабочей области окна появятся изображения данной категории. При установке курсора на изображение видна подсказка с указанием имени, размера изображения и файла, в котором он содержится, а также формата графического изображения (рис. 15.9).
- Нажмите кнопку со стрелкой с правой стороны выбранного изображения. Появляется контекстное меню.
- Выберите в контекстном меню команду Копировать (Сору).
- Перейдите на Web-страницу и вставьте на нее из буфера обмена изображение, используя для этого любое удобное средство. Например, нажмите комбинацию клавиш
+. - Сохраните Web-страницу с размещенным в ней графическим изображением, нажав кнопку Сохранить
(Save) на стандартной панели инструментов. Появляется диалоговое окно Сохранение внедренных файлов
(Save Embedded Files) (рис. 15.10), предлагающее сохранить размещенное на странице изображение в папке images
Web-узла под именем, с которым файл находился в библиотеке. Это окно содержит кнопки следующего назначения:
- Переименовать (Rename) - позволяет переименовать файл.
- Сменить папку (Change Folder) - открывает диалоговое окно Смена папки (Change Folder), содержащего папки текущего Web-узла, позволяя выбрать иную папку для сохранения файла.
- Действие (Set Action) открывает диалоговое окно Задание действия, позволяющее изменить значение Сохранить (Save) столбца Действие (Action) на Не сохранять (Don"t Save). При выборе значения Сохранить рисунок сохраняется в указанной вами папке Web-узла, в противном случае на Web-странице останется ссылка на изображение, находящееся в библиотеке Clip Art.
Область Рисунок (Picture preview) показывает размещаемое изображение. Установив в диалоговом окне Сохранение внедренных файлов нужные параметры, нажмите кнопку ОК. Графический файл будет сохранен в указанной вами папке Web-узла.
Рис. 15.10.
Размещение графического изображения из файла
Мы рассмотрели размещение на Web-странице графического изображения из библиотеки Clip Ait. Для размещения на странице графического изображения из файла выполните одно из следующих действий:
- В меню Вставка (Insert) выберите команду Рисунок (Picture), а затем в открывшемся подменю - опцию Из файла (From File)
- Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на стандартной панели инструментов
- Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на панели инструментов Рисунки (Pictures)
При выполнении любого из этих действий открывается диалоговое окно Рисунок (Picture) (рис. 15.11). Найдите с помощью этого окна требуемый графический файл и для его размещения на Web-странице нажмите кнопку Вставить (Insert). Диалоговое окно закроется, а изображение будет размещено на странице.
Рис. 15.11.
Настройка свойств изображения
После размещения изображения на Web-странице необходимо настроить его свойства, используя диалоговое окно Свойства рисунка (Picture Properties) (рис. 15.12). Для его открытия щелкните мышью на изображении, а затем выполните одно из следующих действий:
- В меню Формат (Format) выберите команду Свойства (Properties)
- Выберите команду контекстного меню Свойства рисунка (Picture Properties)
- Нажмите комбинацию клавиш
+
Диалоговое окно Свойства рисунка содержит три вкладки: Общие (General), Видеозапись (Video), Вид (Appearance). Рассмотрим более подробно возможности настройки с помощью данного диштогового окна.
Цвета в таблице
Как построить на странице таблицу
Списки в списках
Списки определений
Нумерованный список
Маркированный список
Как создать на странице список
Существует три основных типа списков: маркированные, нумерованные и списки определений. Главное различие перечисленных типов состоит в способе нумерации и структуре.
Наиболее часто используется ненумерованный, или маркированный список. Маркированный список задается тегами , а пункты списка между этими тегами - с помощью тега
Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графических маркеров автоматически помещаются последовательные номера или буквы.
Нумерованный список задается с помощью тегов . Как и в маркированном списке, каждый пункт задается тегом
- ключевое слово TAPE.
- . Тег
- задает отдельный элемент, то есть определяемый термин, а тег
- - остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением. Задается список определений так же, как и другие списки. Единственное отличие - для каждого элемента требуется два тега.
Одно из замечательных свойств списков - это возможность вкладывать их друг в друга. Вложение списка в список производится так же, как простое создание списка. Для этого не существует специальных тегов HTML. Чтобы не запутать браузер, убедитесь, что вы закрыли каждый внутренний список с помощью тега . Вкладывать друг в друга можно даже различные типы списков.
Воспроизведите все вышеперечисленные списки
У списков есть один недостаток - они одномерны. Это означает, что вы можете располагать информацию только на следующих друг за другом строках. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам.
Для задания таблиц используется целый ряд тегов. Теги
и
обрамляют таблицу целиком, а ряд других тегов определяют, каким образом будет выводиться информация. В таблице приведено полное описание тегов таблиц.Теги HTML для построения таблиц:
Теги Описание
и Эти теги охватывают таблицу. Тег
сообщает браузерам, что далее следует описание таблицы. Если вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER.
и Текст, отмеченный этими тегами, выводится в виде заголовка. Для задания заголовка можно также применять теги
и .и Теги отображают текст заголовками строки или столбца немного более крупным полужирным шрифтом.и Теги определяют каждую строку таблицы. Тег необязателен, но он делает Ваш HTML-код более полным и понятным.и Эта пара тегов отделяет текст каждой ячейки таблицы.Создайте файл, в котором постройте таблицу из пяти строк и пяти столбцов.
Существует ряд тегов, позволяющих задавать цвета фона и сетки таблицы. В первом случае ключевое слово BGCOLOR вставляется в тег
следующим образов:
Кроме ключевого слова BGCOLOR, существуют и другие способы управлять цветом:
BORDERCOLOR Изменят цвет сетки таблицы
BORDERCOLORDARK/ Используется для изменения сетки с
BORDERCOLORLIGHT дополнительным эффектом трехмерности
Измените цвет сетки таблицы с эффектом трехмерности .
Урок 12-13. Использование графики
Рисунки и графика очень важны для WWW. Это единственное средство Интернета, позволяющее просматривать на экране одновременно изображения и текст.
Чтобы поместить изображение на Web-странице, нужно знать, как применять тег
. Введите тег
и ключевое слово SRC= для указания, какую графику загрузить.
Вводя этот тег, обратите внимание, что файл должен находиться в той же папке, что и Ваш HTML-файл.
HTML-изображения добавляются на веб-страницы с помощью тега
. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
С помощью HTML-тегов
Вставка изображений в HTML-документ
1. Тег
Элемент
представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент
является строчным, то рекомендуется располагать его внутри блочного элемента, например,
Или
.Тег
имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:
Для тега
доступны следующие атрибуты:
Таблица 1. Атрибуты тега
Атрибут Описание, принимаемое значение alt Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение.
Синтаксис: alt="описание изображения" .crossorigin Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
Синтаксис: crossorigin="anonymous" .height Атрибут height задает высоту изображения в px .
Синтаксис: height="300" .ismap Атрибут ismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент является потомком элемента с действительным атрибутом href .
Синтаксис: ismap .longdesc URL расширенного описания изображения, дополняющее атрибут alt .
Синтаксис: longdesc="http://www.example.com/description.txt" .src Атрибут src задает путь к изображению.
Синтаксис: src="flower.jpg" .sizes Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset . Значением атрибута является одна или несколько строк, указанных через запятую. srcset Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src . Значением атрибута является одна или несколько строк, разделенных запятой. 
usemap Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа # . Значение ассоциируется со значением атрибута name или id тега width Атрибут width задает ширину изображения в px .
Синтаксис: width="500" .1.1. Адрес изображения
Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.1.2. Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height . Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
1.3. Форматы графических файлов
Формат JPEG (Joint Photographic Experts Group) . Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
Формат GIF (Graphics Interchange Format) . Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
Формат PNG (Portable Network Graphics) . Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
Формат APNG (Animated Portable Network Graphics) . Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.
Формат SVG (Scalable Vector Graphics) . SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
Формат BMP (Bitmap Picture) . Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
Формат ICO (Windows icon) . Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.
2. Тег
Тег
Для тега доступен атрибут name , который задает имя карты. Значение атрибут name для тега
Элемент
3. Тег
Тег описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.
Таблица 2. Атрибуты тега
Атрибут Краткое описание alt Задает альтернативный текст для активной области карты. coords Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:
для круга — координаты центра и радиус круга;
для прямоугольника — координаты верхнего левого и правого нижнего углов;
для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.download Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения. href Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки. hreflang Определяет язык связанного веб-документа. Используется только вместе с атрибутом href . Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка. media Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос. rel Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.shape Задает форму активной области на карте и ее координаты. Может принимать следующие значения:
rect — активная область прямоугольной формы;
circle — активная область в форме круга;
poly — активная область в форме многоугольника;
default — активная область занимает всю площадь изображения.target Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.type Указывает MIME-тип файлов ссылки, т.е. расширение файла. 4. Пример создания карты-изображения
1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint .
Рис. 1. Пример разметки изображения для создания карты
2) Задаем имя карты, добавив его в тег
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием
TAPE=1 – Стандартная нумерация(1,2,3,4,5, …)
TAPE=A – Прописные буквы(A, B, C, D, …)
TAPE=a – Срочные буквы(a, b, c, d, …)
TAPE=I – Римские цифры(I, II, III, IV, …)
TAPE=i – Строчные римские цифры(i, ii, iii, iv, …)
Списки определений выглядят несколько иначе, чем другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег
