Web дизайн\Учебник по HTML
Глава 6. Визуальная привлекательность:
графика на веб-страницах
Подавляющее большинство веб-страниц содержит графические изображения,
которые либо улучшают внешний вид, либо несут в себе какую-то информацию,
либо облегчают пользование сайтом. Вообще-то, изображения и создаются,
и включа ются в веб-страницы довольно просто. Нужно только корректно использовать
со ответствующий XHTML-инструментарий. Важно помнить, что не у всех поль
зователей имеются графические браузеры, поэтому не вся аудитория сможет
любоваться вашими картинками. Исходя из этого, следует подумать, чем компен
сировать потенциальное отсутствие графики на конкретных браузерах. К счастью,
у элементов, с помощью которых вы добавляете графику, есть атрибуты, позволяющие
на место изображения поместить «альтернативный» текст.
Из этой главы вы узнаете следующее:
- как создавать и конвертировать изображения;
- как размещать изображения на веб-странице;
- как пользоваться атрибутами, определяющими альтернативный текст;
- как настроить размещение изображения на странице.
Изображения в Сети
Когда мы говорим об изображениях в Сети (и вообще в вычислительных сие
мах), речь, на самом деле, идет о файлах определенного типа. Что в них
содержится, нас в данном контексте волнует мало. Это может быть рисунок,
изображен полученное с помощью сканера, цифровой камеры, или даже текст,
оформленный в графическом приложении. При этом важно, чтобы файл был определенного
формата.
Это означает, что текстовые редакторы, например Windows Notepad или
SimpleText, не смогут корректно отобразить графические файлы. Для этого
вам потребуется программа просмотра изображений или программа их редактирования,
или веб-браузер. Именно форматом файлов отличаются изображения от текстовых
документов и от HTML-страниц.
Размещать изображения в веб-документах не просто, а очень просто. Вам
для этого нужен всего один элемент — <img />. Следует лишь помнить
о том, что вы добавляете само изображение, а помещаете лишь ссылку на
файл, его содержащий. А файл этот может находиться на жестком диске сервера
или где-то в Сети. Таким образом, изображение и HTML-документ существуют
независимо друг от друга (рис. 6.1).
Рис. 6.1. Изображение, которое вы видите на этой
странице, — это результат выполнения инструкции HTML по поиску файла и
отображение его на странице в окне браузера
Проблема «поиска» файла с изображением, может быть, не вполне ясна.
Как и на любой HTML-документ, можно поставить ссылку на файл с изображением,
потому что в обоих случаях их местонахождение однозначно определяется
по URL. При этом не имеет значения, где расположен файл: в той же папке,
что и HTML-документ, в котором стоит ссылка, в другой папке или вообще
на другом сервере. Важно, чтобы URL присутствовал в принципе. Подробнее
об этом вы узнаете из параграфа «Элемент <img />». Но вначале я
произведу небольшой обзор графических форматов и расскажу, как создавать
и конвертировать изображения для применения в Сети.
Форматы изображений
Как уже упоминалось, изображения — это файлы определенных форматов,
которые распознаются браузерами и графическими приложениями. В Сети используются
форматы JPEG, GIF и PNG. Следует отметить, что в компьютерном мире изображения
могут существовать и во многих других форматах, таких как PCX, TIFF, PICT
и т. д.
Из соображений совместимости было избрано три формата, которые применимы
в веб-публикациях. Соответственно, если у вас имеются файлы других графических
форматов и вы хотите использовать их на своей веб-странице, нужно позаботиться
об их преобразовании. Предлагаю небольшой обзор Интернет-форматов изображений.
- JPEG (Joint Photographic Experts Group, произносится «джи-пег»).
Этот формат обычно используется для передачи фотографий, поскольку он
умеет не плохо справляться с изображениями, содержащими несколько миллионов
цветов. Если у вас есть файл, снятый на цифровой фотоаппарат или полученный
при помощи сканера, то может быть, что он уже в JPEG.
- GIF (Graphics Interchange Format, произносится «джиф» или «гиф»).
Файлы такого формата чаще всего являются созданными на компьютере: это
может быть, например, текст или рисунок. Почему именно так? Потому что
в этом случае требуется гораздо меньше цветов. GIF-файлы хорошо сжимаются,
а следовательно, быстрее передаются по Интернету. Это важный параметр.
Кроме этого, формат GIF "позволяет создавать прозрачные изображения,
так что ка жется, будто рисунок действительно нарисован на веб-странице.
А еще формат GIF позволяет создавать анимацию.
- PNG (Portable Network Graphics, произносится «пинг»). Этот формат
по за мыслу создателей должен был заменить GIF, частично по той причине,
что последний использует запатентованный алгоритм сжатия, a PNG далек
от этого. PNG также умеет делать изображения прозрачными и позволяет
создавать ани мацию.
Таким образом, если вы сами создали рисунок при помощи программы рисования
или какого-то редактора изображений, то лучше сохранить его в GIF или
PNG, конечно, если рисунок не фотографического качества. Если изображением
является фотография в каком-либо формате, лучше найти соответствующую
программму и конвертировать его в JPEG, как описывается далее.
ВНИМАНИЕ
Избегайте копирования или конвертирования чужих файлов
с изображениями, если у вас нет соответствующих прав. Веб-браузеры и другое
прикладное ПО не будет делать никаких предупреждений, если вы пожелаете
поступить таким образом, но помните, что не все изоб ражения, к которым
у вас есть доступ через Интернет, можно свободно копировать и ис пользовать
в своих целях. На них могут существовать авторские права. Прежде всего
это предупреждение относится к логотипам и некоторым фотографиям. Лучше
использовать исключительно свои файлы, а не копировать чужие.
Какие изображения следует использовать
Когда вы выбираете или создаете изображения для веб-страницы, старайтесь
руководствоваться следующими соображениями: во-первых, «хороша ложка к
обеду» — изображение должно быть на своем месте; во-вторых, загрузка файла
не должна занимать много времени.
Фотографии, таблицы и графики разнообразят страницу, улучшают ее вид
и информативность. «Голый» текст не может долго удерживать внимание читателя,
поэтому иногда следует использовать изображения для того, чтобы немного
разбить текст, подвести итоги или просто сделать страницу более привлекательной.
Старайтесь использовать простые и понятные изображения. Например, маленькие
значки можно использовать так же, как в Windows или Macintosh OS используются
маленькие значки (icon) для обозначения файлоф или папок. На своей странице
вы можете организовать нечто подобное. При этом такие файлы будут занимать
минимум места.
Изображения, предназначенные для выполнения чисто утилитарных функций,
могут и не выглядеть как изображения. Даже наоборот, логичнее сделать
их похожими па текст. Действительно, иногда только таким образом можно
добиться нужного стиля оформления текста. На рисунке 6.2 показано, как
используется этот подход для создания красивого заголовка.
Рис. 6.2. Изображения могут
выглядеть как стилизованный текст
Вставить в веб-страницу изображение - дело нехитрое. Гораздо сложнее
- создание хороших картинок для сайта. Они должны удовлетворять сразу
нескольким противоречивым требованиям: быть интересными, полезными в данном
контексте, привлекательными и в то же время не слишком крупными. Большинство
непрофессиональных веб-дизайнеров не уделяют внимание оптимизации всех
этих параметров, однако профессионал знает, что только хорошо продуманное
изображение будет правильно восприниматься. Вот несколько основных правил
создания «хорошей» картинки.
- Фотографии и графика должны непосредственно относиться к информации
на вашей страничке. Не следует включать изображения только для того,
чтобы увеличить размер страницы. Вряд ли это кто-то оценит. Большинство
пользователей ищет в Интернете информацию или стремится получить те
или иные услуги, а не увидеть фотографию вашей любимой кошки.
- Изображения должны загружаться быстро — в этом залог успеха. А для
этого файлы должны иметь разумный размер. По тем же соображениям не
следует перегружать страницу картинками.
- За последние несколько лет технический прогресс преподнес нам массу
высокотехнологичных средств цифровой обработки изображений. Воспользуйтесь
ими. Удостоверьтесь в том, что имеете дело с правильным форматом, при
помощи хорошей программы обработки изображений доведите картинку до
приемлемого качества, при этом постарайтесь сделать файл как можно меньше.
В главе 11 все эти шаги будут рассмотрены более подробно.
Понятие «размер изображения» можно понимать двояко: как размер, который
оно занимает на веб-странице, и как количество килобайт, которое оно занимает
на веб-сервере и которое, соответственно, должно передаваться по линии
связи ко нечному пользователю. Я имею в виду прежде всего второе. Чем
меньше размер файла с изображением, тем лучше. То, сколько оно должно
занимать на вашей стра нице, уже зависит от ситуации.
Но как уменьшить размер файла? Некоторые приложения имеют специальные
функции, позволяющие делать это разными путями. Но в общем случае секрет
заключается прежде всего в выборе правильного формата (JPEG — для фотографий,
GIF или PNG — для графики, текста). Кроме того, нужно поискать компромисс
между количеством используемых цветов и качеством изображения. Можно убрать
не несущие смысловой нагрузки фрагменты текста и изображения. Используйте
пространство страницы и время пользователя рационально! Подробности см.
в главе 11.
Создание и преобразование изображений
Если уж вы решились использовать на своей странице графику, следует
подумать о ее создании и преобразовании в нужный формат с необходимым
качеством. Вам понадобятся программы редактирования изображений, о которых
я упоминал в главе 3, а также какие-нибудь уже существующие в цифровом
виде картинки или идеи по их созданию. В этом параграфе мы обсудим два
совершенно разных приложения: Paint Shop Pro для Windows и GraphicConverter
для Macintosh.
Paint Shop Pro
Paint Shop Pro для Windows является одной из самых популярных программ
редактирования изображений, особенно среди веб-дизайнеров. И это понятно:
основные функции выполняются очень просто.
Если у вас уже есть файл, над которым вы собираетесь работать, его нужно
открыть, выбрав из меню File команду Open. Файл может содержать фотографию,
рисунок, созданный в другом приложении или даже в самом Paint Shop Pro.
Теперь вы готовы работать над изображением, подготавливая его к публикацнии
Сети.
Выделение нужного фрагмента изображения
Под выделением нужного фрагмента изображения понимают получение той
части, которую вы собираетесь использовать в дальнейшем, и удаление всего
остального. Во многих случаях это делается для того, чтобы оставить от
всей картинки только необходимый фрагмен.т При этом достигаются две цели:
уменьшение размера файла и уменьшение размера самого изображения, которое
вы размещаете на веб-странице. Зачастую задний фон какой-нибудь фотографии
бывает вовсе не нужен, тогда следует применить эту операцию.
В Paint Shop Pro это делается следующим образом. Выберите инструмент
Crop и выделите часть изображения, которую хотите оставить в качестве
результирующей. Для этого щелкните правой кнопкой мыши на левом верхнем
угле выделяемой области и, не отпуская кнопки мыши, перетащите ее в правый
нижний угол. Отпустите клавишу, часть изображения окажется заключенной
в рамку, как показано на рис. 6.3.
Рис. 6.3. Выделение области
изображения в Paint Shop Pro
Теперь выберите из меню Image пункт Crop или просто щелкните дважды
внутри выделенной области. От вашего изображения останется только выбранная
часть. Затем в меню File выберите Save и сохраните сделанные изменения.
Или из того же меню выберите Save As, чтобы сохранить изображение под
новым именем. При этом исходный файл останется неизменным.
Изменение размеров изображения
Иногда даже после кадрирования изображения выясняется, что разрешение
слишком большое и размер файла, мягко говоря, не удовлетворит среднего
пользователя .Проблема решается изменением размера изображения, что делается
в Paint Shop Pro очень просто.
Предположим, что файл уже открыт. Выберите в меню Image пункт Resize.
В секции Pixel size диалогового окна введите новый размер, он измеряется
в пикселах Обратите внимание: когда вы изменяете высоту, ширина меняется
автоматически, и наоборот. Так происходит только тогда, когда поставлен
флажок Maintain Aspect Ratio. При этом вы можете быть уверены в том, что
изменение размеров картинки произойдет пропорционально (впрочем, если
вы хотите добиться обратного эф фекта, можете выключить этот флажок.
Если хотите, можете щелкнуть на кнопке рядом с надписью Percentage Of
Original, при этом изменения будут совершаться в процентах от размера
оригинала, и не заботиться о том, на сколько пикселов вам нужно изменить
картинку.
После завершения работы с этим диалоговым окном нажмите ОК, и вы увидите,
что размер изменился.
Все о пикселах
Пиксел расшифровывается как «элемент изображения» (PICture'S ELenient),
иначе говоря «точка». Изображения на экране формируются из определенного
числа точек. Чем их больше, тем больше делается изображение.
Ваш компьютер (вернее, операционная система) имеет настройки, определяющие
фиксированное число точек, выводимых на экран. Оно для современных мониторов
обычно варьируется от 800 х 600 до 1024 х 768 (В зависимости от монитора
могут быть и другие настройки). Изображения, снимаемые с цифровых камер,
имеют «мегапиксельное» разрешение: от 1024 х 768 до 2048 х 1536 и даже
более. Для изображений, размещаемых на веб-странице, это очень много.
Следователь но, придется их кадрировать и/или изменять размер.
Можно встретить еще одну систему измерения: пиксел на дюйм (ppi). Разные
эле менты могут иметь разное разрешение, поэтому пикселы сами по себе
могут ниче го и не сказать. Если какая-нибудь программа заинтересуется
разрешением в ppi, помните, что оно для веб-изображений не должно превышать
72 ppi. Как вы узнае те из главы 11, ppi изображений является величиной,
изменяемой в соответствии с нуждами минимизации размеров.
Добавление текста
Чтобы добавить текст к изображению (или чтобы создать изображение, представляющее
собой текст), достаточно щелкнуть на кнопке Text (она выглядит в Paint
Shop I Pro как буква «А»), затем щелкнуть в том месте картинки, начиная
с которого дол жен следовать текст. При этом появится диалоговое окно
ввода текста Text Entry.
В поле, рядом с которым написано Enter Text Here, введите текст. Затем,
используя различные команды внутри диалогового окна, настройте его вид:
шрифт, размер стиль, расположение, кернинг (расстояние между символами)
и межстрочный интервал. Закончив работу с текстом, нажмите ОК.
Одна из настроек позволяет сглаживать текст. Пользоваться этим полезно
- текст становится более привлекательным.
После нажатия на ОК диалоговое окно закрывается, а текст становится
объектом изоб ражения, выделенным в рамку для удобства редактирования
(рис. 6.4). Если вам нужно переместить его, наведите мышку на самую середину
рамки. Когда обычный указатель превратится в «розу ветров с четырьмя лепестками»,
нажмите клавишу мыши и, удерживая ее, перетаскивайте текст (вместе с рамкой)
на нужное место.
Рис. 6.4. Добавление текста
в Paint Shop Pro
СОВЕТ
Если подвести указатель мыши к одной из границ рамки, нажать
левую кнопку и, не отпуская ее, переместить мышь, весь текст вытянется/сожмется.
Таким образом можно создавать интересные эффекты «вытянутого» или «толстого»
текста.
Сохранение или конвертирование файла
После окончания работы над изображением, надо его сохранить. Делается
это стандартно: File > Save As. Выбираете нужный формат и имя, нажимаете
Save. Старайтесь в имени файла не использовать русские буквы или пробелы,
с ними обычно возникают лишние проблемы при публикации в Сети.
Еще раз напоминаю о том, как выбирается формат файла. Если вы сохраняете
фотографию, вам нужен JPEG — JFIF (JFIF-совместимый). Рисунки, созданные
в Paint Shop Pro, сохраняйте как GIF или PNG.
ПРИМЕЧАНИЕ
Во время работы в диалоговом окне сохранения можно делать
еще много чего, например, уменьшать размер изображения (глава 11).
GraphicConverter
GraphicConverter — одна из популярнейших программ работы с графикой
в среде Macintosh. Есть версии как для Mac OS 9 (и более ранних ОС), так
и для Mac OS X. Чтобы открыть графический файл, выберите File > Open.
Теперь вы можете обрезать, изменять размер и сохранять/конвертировать
изображение.
Обрезка (кадрирование) изображения
Чтобы в GraphicConverter вырезать часть изображения, щелкните на значке
ин струмента Selection (он выглядит как пунктирный прямоугольник) и поместите
указатель мыши на картинку. Теперь нужно нарисовать область выделения.
Для этого из левого верхнего угла этой области, удерживая клавишу мыши,
перемести те указатель в правый нижний угол. После того как вы отпустите
клавишу, область выделится пунктирной линией (рис. 6.5).
Чтобы отсечь оставшуюся часть и сохранить только выделенную область,
выберите Edit > Trim Selection. Вы увидите новую, «уменьшенную» версию
исходного изоб ражения. Сохраните это произведение искусства цифровой
обработки с помощью команды File > Save As.
Рис. 6.5. Выбор области выделения
в GraphicConverter. Изменение размера изображения
Чтобы изменить размер изображения в GraphicConverter, для начала откройте
его. Выберите из меню команду Picture > Size > Scale. В появившемся
диалоговом окне введите новое значение высоты или ширины. При этом второе
значение появится автоматически после ввода первого, если включена функция
Keep Proportions. В качестве единиц измерения можно установить либо пикселы,
либо проценты. После завершения работы с диалоговым окном нажмите ОК.
В большинстве случаев вам будет достаточно картинки размерами несколько
сотен на несколько сотен пикселов. При этом уже изображение 320 х 200
займет примерно четверть пользовательского окна (разговор об этом шел
чуть выше, в разделе, посвященном пикселам).
Добавление текста
Чтобы добавить текст к изображению (или чтобы создать изображение, представляющее
собой только текст), достаточно щелкнуть на кнопке Text (она выглядит,
как буква «А»), затем выделить область, в которой будет размешен этот
текс.т Областьможно увеличивать или уменьшать с помощью мыши. После этого
начинайте вводить текст (рис. 6.6).
Рис. 6.6. Ввод текста с помощью
GraphicConverter
Если вы хотите переместить область с текстом, наведите на нее указатель
мыши и добейтесь того, чтобы он принял вид ладони. Теперь, удерживая кнопку
мыши, можно перемещать текст.
Если вы хотите изменить начертание букв, делайте это при выделенном
тексте (если он не выделен, снова воспользуйтесь инструментом Selection).
Теперь можно просто дважды щелкнуть на инструменте. Text и в диалоговом
окне изменять любые параметры текста.
СОВЕТ
Одна из настроек (Anti-Alias) позволяет сглаживать текст
Пользоваться ей полезно — текст становится более привлекательным.
Сохранение или конвертирование файла
После окончания работы над изображением, надо его сохранить. Делается
это стандартно: File > Save As. Выбираете нужный формат и имя, нажимаете
Save He следует в имени файла использовать русские буквы или пробелы,
с ними обычно возни кают лишние проблемы при публикации в Сети.
Еще раз напоминаю о том, как выбирается формат файла. Если вы сохраняете
фотографию, вам нужен JPEG — JFIF (JFIF-совместимый). Рисунки, созданные
в GraphicConverter, сохраняйте как GIF или PNG Когда вы выбираете формат,
к имени файла автоматически добавляется трехбуквенное расширение.
Если вы в качестве типа файла указываете JPEG/JFIF, появляется диалоговое
окно, в котором можно изменить степень сжатия. От нее зависит соотношение
размер/ качество. Понятно, что чем меньше размер файла, тем ниже качество.
Кроме того, можно выбирать метод компрессии: QuickTime или JPEG 60 Выберите
JPEG и нажмите ОК.
Элемент <img />
Когда вы вставляете картинку в свою веб-страницу, вы делаете это, указывая
ее URL, то есть уникальный адрес, по которому размещен файл с изображением.
Он может указывать на тот же каталог сервера, в котором находятся остальные
файлы вашего сайта, а может содержать адрес какого-то другого сервера
в Интернете.
Стандартным способом добавления изображений является использование элемента
<img />. При этом картинка вставляется непосредственно в то место,
где написан этот тег (такое изображение называется внутристрочным). Другой
способ — «плавающие изображения» — рассматривается далее в данной главе.
Основной разницей между этими способами является то, что обычное изображение
не привязывается к полям страницы, а привязывается к тексту. Плавающее
изображение может быть привязано к левому или правому полю.
Итак, поговорим об элементе <img />. С его помощью резервируется
место на странице под изображение. Базовая конструкция должна выглядеть
таким образом: <img src="image_URL" />.
Атрибут src расшифровывается как source (источник) и содержит адрес графического
файла То есть вместо слов imageJJRL должен быть реальный URL.
Адрес файла может представлять собой как полный путь (например, http://www.fake
corpcom/images/productljpg), так и относительный (если, например, файл
расположен на том же сервере, что и HTML-страница).
Относительный URL означает, что не указывается первая часть адреса (например,
/images/productljpg). При этом считается, что первая часть (http://www.fakecorp.com}
совпадает с URL той страницы, на которой расположена ссылка на изображение.
Вот пример размещения ссылки на графический файл на веб-странице (рис.
6.7).
<p><img src="threegif" />Продукция ресторана Rudolfo - это вкусная,
полезная пища, которая не отягощает ваш желудок и бумажник.
Прекрасные блюда европейской кухни, включая вина, произведенные
в самом сердце старой доброй Европы.
Обстановка ресторана располагает к спокойному
разговору наедине за чашечкой кофе .Три звездочки.</р>
Вы, вероятно, заметили, что в атрибуте src указан относительный UR.L
Однако с тем же успехом на его месте мог быть и полный адрес:
<img src="http://www.fakecorp.com/images/three.gif" />
Рис. 6.7 Обратите внимание:
изображение появилось на той же строке, что и текст Это внутристрочное
изображение
Оба варианта вполне приемлемы, но полный адрес имеет смысл указывать
только тогда, когда он содержит ссылку на изображение, расположенное где-то
в другом месте в Интернете. Если файл находится в подкаталогах (относительно
HTML-файла), подойдет такой вариант:
<img src="/images/images.gif" />
ПРИМЕЧАНИЕ
Следует помнить, что нельзя помещать на веб-странице ссылки
на файлы, расположенные на вашем локальном жестком диске (если вы, конечно,
хотите, чтобы пользователи вебсайта увидели их содержимое). В Сети нет
вашего жесткого диска, есть только жесткий диск веб-сервера. Поэтому если
вы создадите ссылку вида <img src="file:///c|web_site/image.gif"
/>, то пользователи не смогут увидеть указанное изображение.
Альтернативный текст
Далеко не у всех пользователей установлен Internet Explorer, Netscape
или вообще хоть какой-нибудь графический браузер. Многие не могут позволить
себе просматривать на сайтах графику из-за слишком медленного соединения.
Кроме того, не следует забывать про пользователей разного хитрого оборудования
типа сотовых телефонов с WAP, карманных компьютеров и голосовых браузеров
для слепых. Как же в этих случаях поступить с графикой? HTML предлагает
простое решение: альтернативныи текст. Он задается при помощи атрибута
alt. В нем содержится строка текста, которая заменяет изображение в случае
невозможности его вывода на экран по каким-либо причинам. Зачастую этот
текст выводится в отдельном прямоугольнике, очерчивающем то место, где
должно быть изображение. Вот пример:
<img src="graphlgif" alt="Ha таблице показан прирост
всех показателей" />
Наличие атрибута alt считается хорошим тоном, поскольку это показывает,
что вы заботитесь о своей аудиториию. Исходя из этого не следует в качестве
альтерна тивного текста писать не имеющие смысла сообщения типа "Здесь
нарисован кружочек" или "Напишите здесь ваш любимый афоризм".
Альтернативный текст должен быть коротким, но действительно информативным.
Если вы желаете как можно полнее описать отсутствующее изображение, это
можно сделать следующим образом. Поместите в элемент <img /> атрибут
longdesc. Этот атрибут позволяет разместить ссылку на URL, где может располагаться
хоть це лая статья, посвященная данному рисунку.
<img src="graphl.gif" alt="Ha таблице показан прирост
всех показателей" longdesc=
"http://www.fakecorp.com/charts/chartl.htmI" />
Размещение текста и изображений
Сами по себе браузеры мало что делают для улучшения взаимного расположения
текста и изображений на веб-странице. Они воспринимают обычные изображения
просто как буквы. Это не всегда выглядит так, как вам хочется, особенно
если нуж но разместить фотографию. Иногда нужно, чтобы картинки выглядели,
как в журнале, то есть размещались в середине текстового фрагмента.
Рис. 6.8. Текст расположен рядом
с изображением в соответствии с атрибутом align, принимающим значения
bottom, top и middle
К счастью, для этого существуют специальные средства. Элемент <img
/> может иметь атрибут align, который как раз за взаиморасположение
изображений и тек ста и отвечает. В частности, с помощью align определяется,
каким образом текст, расположенный на одной строке с картинкой, будет
выравниваться относительно боковых сторон последней. Синтаксис атрибута
align следующий:
<img align="value" src="image_URL" />
Стандартные значения al ign приведены в табл. 6.1.
Таблица 6.1. Стандартные значения
атрибута align
Значение |
Эффект, оказываемый на текст |
| 'top" |
Текст располагается рядом с верхней границей изображения |
| "middle" |
Текст располагается рядом с серединой изображения |
| "bottom" |
Текст располагается рядом с нижней границей изображения |
По умолчанию <img /> располагает текст так, будто значением al
ign является bottom. Поэтому в том случае, если именно этот вариант вас
устраивает, атрибут ali gn можно опустить. На рисунке 6.8 показаны результаты
расположения текста и изображения при различных значениях атрибута align.
Правое и левое выравнивание изображений
Атрибут align может принимать значения right и left, которые переводят
изображения из разряда обычных в разряд плавающих. Они не появятся именно
в том месте, где расположен элемент <img />, вместо этого вы обнаружите
их рядом с указанным полем (левым или правым) веб-страницы. Кроме того,
текст будет «огибать» картинку, почти как в каком-нибудь иллюстрированном
журнале. Это показано на рис. 6.9.
Рис. 6.9. Верхняя фотография выровнена по левому
краю, нижняя — по правому
Пример:
<p><img src="valley.jpg" align="left" />Виды.
Больше всего туристов привлекают на Инн и Спа великолепные виды.
Куда ни глянешь, всюду такая красота, что невозможно удержаться,
чтобы не воскликнуть что-нибудь жизнеутверждающее.</р>
ПРИМЕЧАНИЕ
Старые браузеры воспринимают еще два атрибута: vspace и
hspace. С их помощью задается, соответственно, вертикальное и горизонтальное
расстояние между текстом и плавающим изображением. Но это не является
хорошим тоном в веб-программировании. В главе 10 вы узнаете, каким образом
это делается с помощью таблиц стилей.
Ширина и высота
Рассмотрим еще два атрибута <img />: width (ширина) и height (высота).
Основной эффект, который они дают, — это чуть более быстрая загрузка веб-страниц.
Браузеру сообщается размер изображения (в пикселах), поэтому он может
зарезервировать для него место на странице еще до окончания загрузки.
А значит, вначале загрузится текст, а затем будут догружаться изображения.
Пользователь может прочитать все, что ему нужно, и, не дожидаясь полной
загрузки страницы, перейти по ссылкам в нужное место сайта. Вот пример
работы с атрибутами width и height.
<p><img src="mountains.jpg" a1ign="left"
width="250" height="100" /> Виды Больше всего туристов
привлекают на Инн и Спа великолепные виды .
Куда ни глянешь, всюду такая красота, что невозможно
удержаться, чтобы не воскликнуть что-нибудь
жизнеутверждающее</р>
СОВЕТ
Как узнать точный размер изображения в пикселах? Это не
составляет большого труда, поскольку можно воспользоваться командой Info.
В Paint Shop Pro выберите для этого Image > Image Information. В GraphicConverter
вам нужна команда Picture > Show Information.
Обратите внимание: атрибуты width и height позволяют изменять реальный
раз мер изображений! То есть можно взять картинку размером 300 х 150 пикселов
и вы вести ее же, уменьшив размер до 150 х 75. Это делается элементарно:
<img src="bigimagejpg" width="150" height="75" />
Увы, мы забыли про размер файла. Его, никакими атрибутами не изменишь.
В приведенном ранее примере мы заставили пользователя загрузить все изображение,
а показали ему только половину. Лучше уж было сначала изменить его, а
затем показывать пользователю то, что получилось.
Резюме
В этой главе вы узнали о форматах изображений, используемых в Сети,
научи лись редактировать и транслировать их. Также вы узнали, как получать
фрагмен ты изображений и добавлять текст. Затем мы обсудили элемент <img
/> во всех его проявлениях и со всеми его атрибутами размещения изображений,
добавления альтернативного текста и определения высоты и ширины картинки.
В главе 7 вы узнаете, как вставлять гиперссылки для связи с другими веб-страницами,
сайтами и Интернет-службами. |
®Abifost,
2006. Копирование информации сайта разрешается только с указанием ссылки на
этот сайт.
Гостевая книга Контакты, резюме,
об авторе
