Центрирование изображений

11 Декабрь 2008 | Автор: adminВ записи нет меток.

Заметили ли вы, что невозможно горизонтально центрировать изображение в окне броузера с помощью атрибута align? Значения middle и absmiddle вертикально центрируют его по отношению к текущей строке, но положение изображения по горизонтали определяется предшествующим содержимым текстового потока и размером окна броузера.

Центрировать изображение по горизонтали можно, только изолировав его от окружающего содержимого с помощью тегов абзаца, раздела или новой строки. Затем следует использовать либо тег <center>, либо атрибут align=center для тегов абзаца или раздела. К примеру:

Kumquats are tasty treats
<br>
<center>
<img src=»pics/kumquat.gif»>
</center>
that everyone should strive to eat!

Используйте тег абзаца с атрибутом align=center, если хотите, чтобы над изображением и под ним оставалось свободное место.

Kumquats are tasty treats
<p align=center>
<img src=»pics/kumquat.gif»>
</p>
that everyone should strive to eat!

Обтекание изображений текстом

8 Декабрь 2008 | Автор: adminВ записи нет меток.

Значения left и right атрибута alignment предлагают броузеру поместить изображение соответственно у левого или правого края текстового потока. Затем броузер выводит оставшееся содержимое документа в свободное пространство, смежное с изображением. В результате содержимое документа, следующее за изображением, обтекает его.

<img src=»pics/kumquat.gif» align=left>
The kumquat is the smallest of the citrus fruits, similar in appearance to a
tiny orange. The similarity ends with its appearance, however. While oranges
are generally sweet, kumquats are extremely bitter. Theirs is an acquired
taste, to be sure.

Можно поместить изображения одновременно по обоим краям текста и он будет выводиться между ними сверху вниз:

<img src=»pics/kumquat.gif» align=left>
<img src=»pics/tree.gif» align=right>
The kumquat is the smallest of the citrus fruits, similar in appearance to a
tiny orange. The similarity ends with its appearance, however. While oranges
are generally sweet, kumquats are extremely bitter. Theirs is an acquired
taste, to be sure.

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

<img src=»pics/marcia.gif» align=left>
Marcia!
<br>
<img src=»pics/jan.gif» align=left>
Jan!
<br>
<img src=»pics/cindy.gif» align=left>
Cindy!

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

Тег img

4 Декабрь 2008 | Автор: adminВ записи нет меток.

Тег <img> позволяет вставить в текстовый поток документа графическое изображение, на которое он ссылается. Ни до, ни после тега <img> не требуется обязательного присутствия конца абзаца или перехода на новую строку, так что изображение может быть помещено буквально «в линию» с текстом и другим содержимым документа.

Сам формат изображения стандартами HTML и XHTML не определяется, хотя опулярные графические броузеры поддерживают GIF, PNG и JPEG расширения. Стандарты также не задают и не ограничи вают их размеры. Изображения могут быть сколь угодно многоцветными, но то, как эти цвета будут воспроизводиться, сильно зависит от броузера.

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

В языке HTML у тега <img> нет закрывающего тега. В XHTML документе требуется либо косая, закрывающая тег перед знаком «>» (например, <img src=»kumquat.gif» />), либо закрывающий тег </img> сразу после открывающего и его атрибутов.

Когда следует использовать текст

1 Декабрь 2008 | Автор: adminВ записи нет меток.

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

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

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

Текст – даже с изображениями, но без всяких пустых украшений или бессмысленной графики – подходит лучше всего, если вы хотите, чтобы документ было удобно обрабатывать поисковым службам, во множестве работающим в сети. Изображения почти всегда игнорируются этими поисковыми средствами. Если главное содержимое страниц составляют рисунки, очень мало информации об этих документах попадет в онлайновые рубрикаторы (сборники ссылок на разнообразные ресурсы сети, отсортированные по темам).

Когда следует использовать изображения

28 Ноябрь 2008 | Автор: adminВ записи нет меток.

Одна картинка может стоить тысячи слов, но не забывайте, что никто
не слушает болтунов. Во первых, и это главное, смотрите на изображения
в вашем документе как на средства представления визуальной информации,
а не как на приманку для неопытных веб серферов. Изображения должны
помогать тексту легче доходить до читателей, а читателям – легче
ориентироваться в документе. Используйте изображения, чтобы пояснить, проиллюстрировать материал и обеспечить его примерами. Сопровождающие
текст фотографии, графики, диаграммы, карты и рисунки – это естественные и приемлемые кандидаты. Фотографии товаров – это неотъемлемая часть
каталогов и путеводителей потоварам в интернет магазинах. Пиктограммы в
якорях гиперссылок, снабженные анимацией, могут служить эффективным навигационным инструментом, облегчающим пользователю доступ к
внутренним и внешним ресурсам. Если изображение не выполняет ни одной из
этих достойных функций, выбросьте его вон из своего документа!

Одно из важнейших обстоятельств, которые необходимо учитывать при
добавлении изображений в документ, – это привносимая ими добавочная задержка
при получении документа из сети, особенно при модемном соединении. Тогда как обычный текстовый документ может иметь объем не более 10–15 Кбайт, любому изображению понадобятся сотни килобайт. Кроме того, общее время получения документа состоит не только из суммы времени, потраченного на каждую из его
частей, но включает в себя все дополнительные задержки, происходящие
при передаче данных по сетям.

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

Разумеется, можно сказать, что рисунки и прочие мультимедийные «излишества» подталкивают интернет провайдеров стремиться ко все более быстрому, лучшему, надежному обеспечению доставки сетевых материалов. В ближайшем будущем модемные соединения последуют за почтовыми каретами, уступив место кабельным модемам и ADSL.

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

Формат PNG

26 Ноябрь 2008 | Автор: adminВ записи нет меток.

Технология PNG (Portable Network Graphics, переносимая сетевая
графика) была создана в качестве замены GIF, но не из-за того, что GIF
плохо справлялся со своими обязанностями. В действительности GIF
был и остается самым востребованным форматом в Интернете. Многие
пользователи были возмущены, когда в 1993 году, после того как GIF
приобрел популярность и широкое распространение, компания Unisys
решила зарегистрировать свои авторские права и собирать дань за
использование технологии сжатия GIF. Эта акция противоречила философии
свободного обмена информацией, которой придерживалось тогдашнее
сообщество пользователей Интернета, состоявшее, в основном, из научных
работников. Она подтолкнула неформальную группу, возглавляемую
Томасом Бутеллом (Thomas Boutell), к разработке альтернативы,
а именно PNG.

Преимущества технологии PNG над GIF и JPEG (помимо того, что она
предоставляет формат, пользователи которого не рискуют оказаться
ответчиками в суде) заключаются в более широком выборе цветовых
форматов (24 битовый RGB, шкала оттенков серого и 8 битовая GIF
подобная палитра) и в меньших потерях при сжатии. Уникальными
и весьма привлекательными чертами технологии PNG являются альфа
каналы, позволяющие указывать огромное количество слоев прозрачности
(более 65 тыс. против одного слоя в GIF) и способные симулировать
трехмерные изображения; гамма коррекция, управляющая яркостью
при переносе с одной платформы на другую и обеспечивающая более
четкую графику; а также двухмерное чередование строк, обеспечивающее
более точное постепенное проявление картинки.

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

Формат JPEG

21 Ноябрь 2008 | Автор: adminВ записи нет меток.

Joint Photographic Experts Group (JPEG) – это организация по стандартизации, разработавшая то, что теперь называется JPEG форматом кодировки
изображений. Подобно GIF форматам, JPEG изображения являются платформно независимыми и специально сжатыми для скоростной передачи посредством цифровых коммуникационных технологий. В отличие от GIF,
формат JPEG поддерживает десятки тысяч цветов для отображения более
детальных, фотореалистических изображений. При этом JPEG использует
специальные алгоритмы, обеспечивающие значительно больший коэффициент
сжатия. Нередко удается, например, 200 килобайтное GIF изображение
сократить до 30 Кбайт, применяя JPEG. Достигая такого впечатляющего сжатия,
JPEG теряет часть содержащихся в изображении данных. Впрочем, можно
управлять уровнем потерь при сжатии, применяя специальные JPEG средства,
так что, хотя восстановленное изображение, скорее всего, и не совпадает с оригиналом в точности, оно будет настолько на
него похоже, что большинство людей не заметит разницы.

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

Формат JPEG, обычно обозначаемый расширением .jpg (или .JPG),
распознается почти всеми современными графическими броузерами.
Изредка встречаются старые броузеры, которые не могут сами воспроизводить JPEG изображения.

Формат GIF

20 Ноябрь 2008 | Автор: adminВ записи нет меток.

Формат обмена графикой (Graphics Interchange Format, GIF) был изначально
разработан для передачи изображений между пользователями онлайновой
службы CompuServe. У этого формата обнаружилось несколько черт,
сделавших его популярным при употреблении в HTML и XHTML
документах. Его кодировка является платформно независимой, так что,
используя подходящую программу декодер (встроенную в большинство
броузеров), вы можете, например, без особых хлопот загрузить и просматривать
на персональном компьютере с Windows изображение, созданное и
превращенное в GIF файл на Macintosh.
Вторая главная черта GIF – это применяемая при создании файла особая
технология сжатия, которая существенно сокращает его размер, что позволяет
передавать изображение по сети быстрее. Сжатие в GIF производится
«без потерь» – никакие данные исходного образца не удаляются и не
изменяются, так что в распакованном виде изображение точно совпадет с
оригиналом. Кроме того, GIF изображения легко анимировать.

Хотя все файлы с GIF изображениями неизменно обозначаются именами с
расширением .gif (или .GIF), существует две версии GIF – ориги
нальная GIF87 и расширенная GIF89a, которая поддерживает несколько новых возможностей, распространенных у сетевых авторов, включая прозрачный фон, чересстрочное хранение и анимацию. Популярные броузеры в настоящее время поддерживают обе версии GIF, использующие одинаковую схему кодировки,
которая представляет собой карту значений цвета пиксела. Сами коды берутся
из встроенной в файл восьмибитной таблицы (палитры), что дает не более 256
различных цветов в изображении. В большинстве случаев употребляется
меньше цветов: для этого применяются специальные средства, упрощающие
слишком богатую палитру графики. При упрощении GIF изображений
создается палитра меньшего размера и увеличивается избыточность данных в попиксельном представлении, что влечет за собой лучшее сжатие файла и,
следовательно, более быструю его загрузку.

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

Поскольку в большинство графических броузеров встроена поддержка
данного формата, такое кодирование изображений является самым
распространенным в сети. Оно подходит как для внедренных в документ
изображений, так и для внешних, подключенных по гиперссылке. При
любых сомнениях используйте GIF.1 Это сработает почти всегда.

Форматы изображений

16 Ноябрь 2008 | Автор: adminВ записи нет меток.

Ни HTML, ни XHTML не дают официальных предписаний для формата
изображений. Однако популярные броузеры особенно хорошо при
способлены для работы с определенными форматами, в частности GIF,
PNG и JPEG (объяснения в следующих разделах). Большинство других
мультимедийных форматов требуют, чтобы пользователь приобрел,
установил на своем компьютере и научился успешно применять
специальные вспомогательные программы. Поэтому неудивительно,
что GIF, PNG и JPEG de facto являются стандартами для изображений
в сети.

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

Изображения в документе

12 Ноябрь 2008 | Автор: adminВ записи нет меток.

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