 |
Главная |
Уложим картинку в фоновый паркет
 2019-07-03 |
 226 |
 Обсуждений (0) |
из
5.00
|
Теперь, после "высоких" сфер, одна приятная (но и опасная для новичков!) техническая подробность.
Пользуясь атрибутом bgcolor команды BODY, можно выкрасить фон документа в какой-нибудь один цвет.
Вместо одноцветной заливки можно использовать картинку. Эта картинка будет, повторяясь, укладываться в экранное поле наподобие паркетных плиточек.
Чтобы "паркет" смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации. И еще: очень важно, чтобы фон оставался именно фоном, а не отвлекал внимание пользователя от главных элементов документа, не мешал читать текст.
Фоновая картинка задается в команде 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 в таком режиме называется прогрессивным.
| 2019-07-03 |
226 |
Обсуждений (0) |
из
5.00
|
Обсуждение в статье: Уложим картинку в фоновый паркет |
|
Обсуждений еще не было, будьте первым... ↓↓↓ |
Почему 1285321 студент выбрали МегаОбучалку...
Система поиска информации
Мобильная версия сайта
Удобная навигация
Нет шокирующей рекламы