Разработка web сайта на основе HTML с использованием JavaScript (стр. 7 из 18)
Фоновая картинка задается в команде BODY атрибутом background:
<BODY background=имя файла с картинкой>
Примеры
1.
| Этот фон задается командой: <BODY background=./pic/fon1.jpg> Посмотреть на полном экране | Картинка, которая используется как фоновая плиточка:  |
2.
3.
| Этот фон задается командой: <BODY background=./pic/fon2.jpg> Посмотреть на полном экране | Картинка, которая используется как фоновая плиточка:  |
4.
5.
| Этот фон задается командой: <BODY background=./pic/fon3.jpg> Посмотреть на полном экране | Картинка, которая используется как фоновая плиточка:  |
6.
7.
| Этот фон задается командой: <BODY background=./pic/fon4.gif> Посмотреть на полном экране | Картинка, которая используется как фоновая плиточка:  |
8.
Антипримеры
1.
| Этот фон задается командой: <BODY background=./pic/bfon1.jpg> Посмотреть на полном экране Плохая стыковка плиточек. | Картинка, которая используется как фоновая плиточка:  |
2.
3.
| Этот фон задается командой: <BODY background=./pic/bfon2.gif> Посмотреть на полном экране Очень плохая стыковка плиточек. | Картинка, которая используется как фоновая плиточка:  |
4.
5.
| Этот фон задается командой: <BODY background=./pic/bfon3.jpg> Посмотреть на полном экране Берегите глаза! | Картинка, которая используется как фоновая плиточка:  |
6.
7.
| Этот фон задается командой: <BODY background=./pic/bfon4.jpg> Посмотреть на полном экране Берегите глаза! | Картинка, которая используется как фоновая плиточка:  |
8.
Как видите, с фоновыми картинками нужно обращаться очень осторожно. Если нет уверенности, что паркет улучшает восприятие документа, лучше использовать одноцветную заливку: на гладком фоне текст всегда читается лучше.
Графика
Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Пора и нам записать в свой актив вывод картинок средствами HTML.
Браузеры "понимают" два графических формата GIF и JPG.
Формат GIF
Картинки в этом формате поддерживают 256 цветов. В большинстве случаев этого вполне достаточно для получения качественных иллюстраций, но до фотографического качества, конечно, далеко.
GIF-формат имеет три приятные дополнительные возможности:
· Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик: нарисовать отдельные кадры, настроить время задержки в последовательности показа, "зациклить кино" или показывать кадры только один раз. Когда анимация готова, она записывается на диск как обычный GIF-файл. Хотя в этом файле не одна, а целая серия GIF-картинок и разная настроечная информация.
В HTML нет различия между заданием вывода на экран простого GIF или анимированного. О том, что картинка "живая" -- браузер узнает в момент загрузки GIF-файла (с диска или сети) и поступает соответственно. Обычные картинки он просто размещает на экране и "забывает" про них. Анимированные ему приходится опекать постоянно, меняя кадры на экране в соответствии с программой, заложенной в самом GIF.
· Прозрачная графика. В GIF-формате один цвет можно объявить прозрачным. Это позволяет избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательным образом. Прозрачный цвет задается в редакторе при записи GIF-файла на диск. Обычный GIF легко сделать прозрачным. Нужно просто загрузить его в GIF-редактор или PhotoShop и снова записать на диск, указав прозрачный цвет.
· Чересстрочная развертка. Применяется для больших GIF. Иллюстрация разделяется на четыре части, размером с оригинальную картинку. Первая часть содержит 1, 5, 9,... строки исходного изображения. Вторая -- 2, 6, 10,... Третья - 3, 7, 11,... Четвертая -- 4, 8, 12,...
Браузер строит на экране сначала первую часть картинки, потом вторую, затем третью и четвертую. Получается эффект постепенного проявления изображения. На медленных линиях Интернета этот метод позволяет пользователю еще до загрузки всех частей получить представление об изображении -- ведь части строятся браузером по мере их поступления на компьютер. Если картинка загружается не по сети, то различия вывода обычного GIF и чересстрочного на быстрых компьютерах практически незаметны.
Формат JPG
Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества.
Конечно, высокое качество отражается на размерах файла. Но формат JPG имеет одну особенность: в JPG-редакторе, при записи на диск, можно указать ту степень качества, которая нужна и, тем самым, балансируя на планке "качество-размер файла", достичь нужного компромисса. В самом деле, если из миллиона цветов отсканированной фотографии оставить только 10 000, заменив остальные цвета на близкие -- на глаз такую подмену будет обнаружить практически невозможно, а размер файла существенно сократится.
JPG-формат поддерживает режим, похожий на чересстрочную развертку GIF. Но в отличие от GIF, деление на части происходит не по строкам, а по алгоритму выделения из картинки полноформатных частей. При этом каждая следующая часть по качеству выше предыдущей. JPG в таком режиме называется прогрессивным.
Как программировать картинки
Картинка в тексте
Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться командой <IMG>. Команда не имеет парного закрывающего тега, но имеет много атрибутов.
Атрибут src = имя файла
Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога.
Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с программами (html-файлами). Тогда команда вывода графики будет иметь вид: <IMG src=./pic/img.gif>
Атрибут alt = "текст надписи"
Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:
| <IMG src=monstr.jpg alt="Страшный зверь"> |
Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию. Проверьте это на следующей картинке:
| <IMG src=./pic07/cat7.gif alt="А нас и тут неплохо кормят!"> |
Атрибуты width = n и height = m
Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.
Если атрибуты не заданы, картинка рисуется в естественных размерах.
Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины.
Рекомендуется всегда записывать эти атрибуты и указывать в них естественные размеры картинки. Если размеры указываются неверно -- картинка выводится браузером с искажением. Если указание размеров вовсе опущено -- на экране происходит маленькое землетрясение в момент прихода картинки из сети. Ведь, не зная размеров картинки, браузер оставляет под нее на экране стандартный прямоугольник, продолжая строить остальные элементы. Когда картинка загружена, браузеру приходится полностью перересовывать экран.
Атрибут border = n
Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов.
При отсутствии атрибута, или при значении n=0 рамка не рисуется.
Ниже расположены ссылки на испытательные стенды. На них можно проверить работу атрибутов src, alt, width, height, border, как по отдельности, так и в совокупности.
Атрибут align
Этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:
| align=top | вертикальное выравнивание по верхнему краю |
| align=middle | вертикальное выравнивание по центру |
| align=bottom | вертикальное выравнивание по нижнему краю |
| align=left | горизонтальное выравнивание по левому краю |
| align=right | горизонтальное выравнивание по правому краю |
Давайте зададим небольшой текстовый абзац и разместим внутри него картинку: