Работа с графическими изображениями

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

Примечание

Здесь нужно сделать оговорку. Существует язык VRML (Virtual Reality Markup Language — язык разметки виртуальной реальности), с помощью которого создаются целые виртуальные миры, которые можно исследовать. Эти миры записываются в виде текстовых тегов, аналогичных тегам HTML, встраиваемым прямо в HTML-код. Также фирмой Microsoft разработан язык VML (Vector Markup Language — язык разметки векторов), служащий для создания графических изображений, тоже в виде текстовых тегов. Но этот язык распространен очень слабо и поддерживается пока только Internet Explorer, начиная с версии 5.0.

Два вида графических изображений

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

Растровые изображения представляют собой набор точек; каждая такая точка может иметь какой-либо цвет, от белого до черного. Цвета всех точек, составляющих подобное изображение, записываются в массив, который, в свою очередь, вместе с некоторой служебной информацией сохраняется в файле. Такой массив называется растром.

К растровым относятся хорошо вам известные изображения форматов GIF (Graphic Interchange Format — формат обмена графикой) и JPEG (Joint Pictures Encoding Group — группа кодирования неподвижных изображений), которые вы загружаете из Интернета, чтобы полюбоваться творениями Бориса Вальехо. К растровым относится также стандартный формат хранения изображений в Windows — BMP (BitMaP — битовая матрица). Еще стоит упомянуть весьма напористого новичка — формат PNG (Portable Network Graphics — перемещаемая сетевая графика). Этот пока еще малораспространенный формат может стать преемником формата GIF, если недавние попытки сделать последний платным все-таки увенчаются успехом.

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

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

Хотя большой размер — не такой уж и непреодолимый недостаток. Форматы GIF, JPEG и PNG стандартно поддерживают сжатие массива данных с помощью специальных алгоритмов. Однако тут кроется другая опасность. Дело в том, что эти алгоритмы реализуют так называемое сжатие с потерями, при которых часть информации, не очень существенная для отображения, отбрасывается, в результате чего объем массива сильно уменьшается. ("Обычные" программы архиваторов, которыми вы пользуетесь, например Zip или Rar, реализуют сжатие без потерь.) При этом, если задать слишком сильное сжатие такого изображения, может пострадать его качество из-за того, что слишком большая часть информации будет отброшена. Впрочем, это уже проблема Web-художника, который будет готовить подобное изображение к публикации в Интернете.

Какие форматы растровых изображений используются в Web-дизайне? В основном, GIF и JPEG. Угадайте, почему? Конечно, потому, что они поддерживают сжатие. Причем, изображения GIF применяют для элементов оформления страниц (линии, маркеры списков и т. п.) и штриховых рисунков, a JPEG — для полутоновых рисунков с большим количеством цветов. Это вызвано тем, что для сжатия изображений этих форматов применяются разные алгоритмы, имеющие свои сильные стороны и свои недостатки.

Формат GIF имеет особое свойство, за что его любят Web-художники. Дело в том, что из-за особенностей этого формата в один GIF-файл можно записать последовательность графических изображений, фактически настоящий фильм. Многочисленные "живые" (даже слишком) рекламные картинки — баннеры - которые в последнее время просто залепили Web-страницы, сделаны в формате "анимированный GIF". Иногда такими картинками злоупотребляют, и ничего хорошего из этого не получается.

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

Формат PNG, как говорят его создатели, объединяет возможности GIF и JPEG, не "прихватывая" заодно с собой их недостатки. Но пока он что-то не очень популярен в Сети. Однако если GIF все-таки сделают платным...

Internet Explorer также поддерживает формат BMP. Непонятно, зачем это нужно, ведь другие Web-обозреватели его не поддерживают.

Осталось только привести расширения, под которыми сохраняются файлы того или иного формата. Файлы GIF, PNG и BMP имеют "говорящие" расширения gif, png и bmp, а файлы JPEG — jpeg, jpg или jpe.

Вторая разновидность графических изображений — векторные. В отличие от растровых, состоящих из точек, они состоят из линий, называемых примитивами. Каждый такой примитив описывается определенной формулой, имеющей конкретный набор параметров. Вот эти параметры и сохраняются в массиве данных. К векторным относится формат изображений, созданных в популярнейшей программе Macromedia Flash, а также второй стандартный формат хранения изображений в Windows — WMF (Windows MetaFile — метафайл Windows). Вообще, существует много форматов векторных изображений, здесь перечисляться они не будут.

Что предлагают нам векторные изображения? Во-первых, небольшой объем, т. к. параметры какой-нибудь загогулины занимают значительно меньше места, чем весь набор составляющих ее точек. Во-вторых, исключительно простое масштабирование: Web-обозревателю достаточно перевычислить формулы с новыми параметрами размеров и нарисовать новую картинку на основе результатов этих вычислений. Недостаток: очень сложные алгоритмы вывода, включающие вычисление сложных формул. К тому же, чем векторное изображение сложнее, тем оно больше и тем дольше выводится на экран.

В Web-дизайне широко используется только один формат векторной графики — Flash. Но назвать это чудо программистского искусства графической программой не поворачивается язык — это мощнейший мультимедийный комплект, позволяющий создавать целые фильмы со звуковым сопровождением, причем, фильмы интерактивные, реагирующие на действия пользователя. При этом файлы, имеющие расширение swf, отличаются небольшими размерами и быстро грузятся даже по относительно слабым каналам. Все Web-обозреватели имеют в своем составе дополнительные модули, позволяющие просматривать фильмы Flash, а те, кто их не имеет, могут без проблем загрузить с сайта Macromedia.

Примечание

Формат VML, о котором говорилось выше, также растровый.

Вставка графического изображения

Ну вот, теория закончена. Пора переходить к практике.

Прежде всего, запасемся портретом, который впоследствии поместим на нашу страницу. Только вот откуда его взять? Ведь нашего Ивана Ивановича Иванова не существует в природе. Автор нашел выход... хоть художник из него не бог весть какой. Готовый "портрет", если можно так выразиться, сохранен в файле Ivanov.gif.

Посмотрим на страницу сведений об авторе. Портрет мы вставим сразу же после слова "Фотография". Поместим текстовый курсор в конце этого слова и посмотрим на вкладку Common панели объектов — там находится кнопка Image (рис. 4.2). Вы также можете воспользоваться пунктом Image меню Insert или нажать комбинацию клавиш <Ctrl>+<Shift>+<!>.

Рис. 4.2. Кнопка Image панели объектов

Нажмем эту кнопку. На экране появится диалоговое окно Select Image Source, показанное на рис. 4.3.

Рис. 4.3. Диалоговое окно Select Image Source

Да-а-а... Взглянуть страшно. Но вас предупреждали, что автор не дружит с живописью!

В общем, здесь описывать особо нечего. Раскрывающийся список папок и список файлов позволят вам выбрать нужную папку и файл. В поле ввода Имя файла появится имя выбранного файла (или вы можете вручную ввести его туда). А раскрывающийся список Тип файлов позволит вам выбрать, какой тип файлов вы хотите найти. Все это знакомо вам по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие — справа находится панель предварительного просмотра, где вы в данный момент видите физиономию Ивана Ивановича. А если она вам настолько противна, что вы хотите убрать ее с глаз долой, просто отключите флажок Preview Images.

Итак, вы выбрали файл, где находится портрет нашего героя. Осталось нажать кнопку ОК. После этого наша страница примет такой вид, как на рис. 4.4.

Ну вот! Мало того, что этот портрет страшен, как семь смертных грехов, так он еще и занял почти все окно! Давайте его уменьшим, а то пользователь испугается.

Рис. 4.4. Страница сведений об авторе с его портретом

Обратите внимание, что на правой и нижней границе портрета имеются небольшие черные квадратики. Это так называемые маркеры изменения размера. Вы можете "захватить" мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения. А если вы хотите, чтобы оба размера изменялись пропорционально, перетащите мышью маркер, находящийся в правом нижнем углу изображения при нажатой клавише <Shift>. Вот так стало лучше (рис. 4.5).

Теперь сохраним получившуюся страницу и посмотрим на редактор свойств. Проверьте, выделен ли портрет: признаком этого служат маркеры изменения размеров. Если их не видно, щелкните мышью по портрету — и они появятся. То, что вы увидите после этого, показано на рис. 4.6.

Поля ввода W и Н позволяют вам ввести вручную соответственно ширину и высоту изображения. Это может быть полезно, если выделенное изображение — часть оформления сайта и должно плотно "прилегать" к другим таким же элементам оформления. В остальных случаях удобнее задавать размеры изображения, перетаскивая мышью маркеры размера.

При вставке графического изображения Dreamweaver сам заполняет эти поля. Мы рекомендуем вам не удалять эти значения. Дело в том, что Web-обозреватель после загрузки страницы отобразит еще не загруженные изображения в виде пустых рамок. Если размеры изображений были явно заданы, они будут сразу же применены к рамкам, и оформление страницы не нарушится. В противном случае Web-обозреватель отобразит рамки некоего размера по умолчанию, и при последующей загрузке изображений их размеры будут меняться, что вызовет изменение самой страницы. А это очень неприятно.

Поля ввода V Space и Н Space задают соответственно вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.

Поле ввода Src задает имя файла, где хранится графическое изображение. Справа от него вы видите уже знакомые вам две кнопки. Нажав на правую из них (с изображением папки), вы откроете диалоговое окно Select Image Source, показанное на рис. 4.3.

Рис. 4.5. Страница сведений об авторе после изменения размера портрета

Рис. 4.6. Вид редактора свойств при выделенном изображении

Вы также можете изменить имя файла изображения, выбрав пункт Source File в контекстном меню или просто дважды щелкнув по изображению мышью. После этого на экране появится диалоговое окно Select Image Source.

Поле ввода Low Src аналогично полю Src, за тем исключением, что задает имя файла, где сохранено так называемое "черновое" изображение. "Черновое" изображение имеет меньший размер, как правило, за счет большего сжатия и низкого качества. Когда пользователь соединяется с Интернетом по низкоскоростному каналу, Web-обозреватель первым делом загружает "черновик", т. к. он имеет значительно меньший размер, и выводит его на странице. А уже потом, пока пользователь просматривает готовую страницу, постепенно загружается полноценное изображение и подменяет собой "черновик".

Рекомендуется изготавливать "черновик" только тогда, когда оригинальное изображение с'лишком велико, чтобы быстро загрузиться. В частности, это подойдет, если вы делаете сайт с художественной графикой.

Dreamweaver предоставляет вам другую возможность задать имя файла "черновика". Для этого выберите пункт Low Source в контекстном меню и укажите нужный файл в появившемся на экране диалоговом окне Select Image Source.

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

Поле ввода Alt задает так называемый "альтернативный текст". Это придумано опять же для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображений, помещенных на ней, отобразит пустые рамки соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель отобразит небольшую подсказку, содержащую этот самый "альтернативный текст". Поэтому мы рекомендуем вам всегда заполнять это поле ввода.

А теперь обратимся к раскрывающемуся списку Align. Оно позволяет вам задать выравнивание, а фактически — относительное местоположение изображения и обтекающего его текста. Но сначала поговорим о том, как графические изображения размещаются на Web-странице.

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

Раскрывающийся список Align предоставляет Web-дизайнеру следующие пункты:
Browser Default — расположение по умолчанию, обычно аналогично пункту Baseline;
Baseline — низ изображения совпадает с базовой линией текста (воображаемой линией, по которой пишется строка текста);
Тор — верх изображения совпадает с верхом текста;
Middle — середина изображения совпадает с базовой линией текста;
Bottom — низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);
TextTop — верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);
Absolute Middle — середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);
Absolute Bottom — низ изображения совпадает с низом самого низко сидящего символа текста;
Left — изображение "прижимается" к левому краю страницы;
Right — изображение "прижимается" к правому краю страницы;
Default - расположение по умолчанию, обычно аналогично пункту Baseline.

В последних двух случаях изображение становится "плавающим", т. е. не привязанным жестко к "потоку" текста. "Плавающее" изображение может быть смещено Web-обозревателем влево или вправо, при этом текст, в который оно было вставлено, может быть раздвинут. А в точке, где оно было вставлено, Dreamweaver отображает специальный маркер "плавающего" изображения, показанный на рис. 4.7. Этот маркер выводится только для удобства Web-дизайнера; в окне Web-обозревателя он виден не будет.

Рис. 4.7. Маркер "плавающего" изображения

Задать выравнивание изображения вы также можете в подменю Align контекстного меню.

Итак, с редактором свойств мы разобрались. Теперь давайте зададим свойства портрета нашего героя. Таким образом, расстояния от текста — 5 пикселов с обеих сторон, выравнивание — по левому краю, альтернативный текст — "Это я, Иван Иванович Иванов". Сохраним страницу.

Примечание

Изображение вставляется в текст с помощью одинарного тега <IMG>. Имя файла задается посредством атрибута SRC. Кроме него, этот тег имеет множество других атрибутов, соответствующих описанным нами параметрам. Получить подробное описание каждого из них вы можете, воспользовавшись поставляемым с Dreamweaver руководством по HTML.

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

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

Кнопка Edit редактора свойств и пункт Edit With <имя программы> контекстного меню позволят вам открыть выделенное изображение в программе, установленной в системе как программа для открытия этих файлов по умолчанию. Это та программа, в которой графические файлы будут открыты при двойном щелчке на них в окне Проводника. Вполне возможно, вам от этой функции не будет особой пользы (у автора, например, некоторые изображения открываются в Internet Explorer, в котором много не наредактиру-ешь). В этом случае воспользуйтесь подменю Edit With контекстного меню; выберите в нем пункт Browse, затем выберите в появившемся на экране диалоговом окне открытия файла Windows исполняемый файл нужной программы и нажмите кнопку открытия. Изображение откроется в этой программе, и вы сможете сделать с ним все, что хотите.

Изображения-гиперссылки

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

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

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

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

Создайте его в графическом редакторе или найдите готовый. Назовите файл с этим изображением Email.gif.

После этого поставьте курсор в начале строки "E-mail: ivanov@mail.ru", сотрите символы "E-mail" и нажмите кнопку Image вкладки Common панели объектов. Выберите файл, где сохранено ваше "коммерческое эт", и нажмите кнопку ОК. Измените размеры свежевставленного изображения, чтобы оно не сильно отличалось от размера шрифта текста, и установите для него выравнивание Absolute Middle. Результат вы можете видеть на рис. 4.8.

Рис. 4.8. Значок "коммерческое эт" — символ электронной почты

Теперь преобразуем этот значок в почтовую гиперссылку. Для этого выделим его, наберем в поле ввода Link редактора свойств почтовый адрес нашего героя mailto:ivanov@mail.ru и нажмем клавишу <Enter>.

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

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

Ну и, конечно же, изображение-гиперссылка может указывать на обычную Web-страницу.

Примечание

HTML-код, использующийся для вставки изображения гиперссылки, имеет вид:

<А НRЕР="<Интернет-адрес>"><IMG SRС="<Адрес файла изображения>"></А>.

Активные изображения

Изображение-гиперссылка при наведении на нее курсора мыши никак не проявляет себя. Конечно, можно выставить параметр Border равным пяти или десяти, но это во многих случаях будет не совсем эстетично. Вот сделать бы так, чтобы изображение менялось при наведении на него курсора мыши, чтобы пользователь сразу видел, что это гиперссылка...

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

Давайте рассмотрим, как поместить на страницу активное изображение. Для этого используем страницу сведений об авторе 4.1.htm, куда мы уже вставили изображение-гиперссылку. Согласитесь, она выглядит не очень эстетично. Давайте заменим ее активным изображением. Создадим в графическом редакторе два изображения со значком "коммерческое эт": одно — обычное, а второе — инвертированное, которое будет перекрывать первое. Первое изображение сохраним в файле Email.gif, а второе — в файле Email2.gif. И, конечно, сотрем всю строку с адресом электронной почты так, чтобы на ее месте остался пустой параграф. Текстовый курсор оставим на получившемся пустом параграфе.

Активное изображение вставляется с помощью кнопки Rollover Image (рис. 4.9) вкладки Common панели объектов или пункта Rollover Image подменю Interactive Images меню Insert. При этом на экране появляется диалоговое окно Insert Rollover Image, показанное на рис. 4.10.

Рис. 4.9. Кнопка Rollover Image панели объектов

Рис. 4.10. Диалоговое окно Insert Rollover Image

В поле ввода Image Name вводится уникальное имя вставляемого активного изображения. Имя должно содержать только латинские буквы, цифры и знаки подчеркивания, причем начинаться должно с буквы. Проверьте только, действительно ли это имя уникально.

В поле ввода Original Image вводится имя файла оригинального изображение. Если вы не хотите вводить его вручную, нажмите кнопку Browse справа от этого поля ввода. После этого на экране появится диалоговое окно Select Image Source (см. рис. 4.3), где вы сможете выбрать нужный файл.

В поле ввода Rollover Image вводится имя файла перекрывающего изображения. Также, если вам неохота водить его вручную, на помощь всегда придет кнопка Browse.

Флажок Preload Rollover Image заставляет Dreamweaver сгенерировать и вставить в HTML-код вашей страницы небольшую программу-сценарий, которая заранее загрузит перекрывающее изображение. Этот флажок включен по умолчанию, и отключать его не стоит. Если же его отключить, то перекрывающее изображение будет загружено тогда, когда в нем возникнет нужда, т. е. когда пользователь поместит над изображением курсор мыши.

В поле ввода Alternate Text вводится "альтернативный текст". Лучше его ввести.

Последнее поле ввода When Clicked, Go To URL задает интернет-адрес, по которому произойдет переход, если пользователь щелкнет на изображении. Спасительная кнопка Browse придет на помощь тем, кто не любит стучать по клавиатуре.

На рис. 4.10 в соответствующие поля ввода подставлены все нужные значения. Вам остается ввести их и нажать кнопку ОК, после чего активное изображение будет создано. Измените его размер, если хотите.

Теперь остается проверить созданное нами активное изображение в действии. Для этого выведите его в Web-обозревателе для предварительного просмотра и поместите курсор мыши над активным изображением. Вы увидите, как оно изменится. Если вы щелкнете по нему, откроется почтовый клиент.

Фоновые изображения

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

Задать фоновое изображение для Web-страницы очень просто. Для этого вызовите на экран диалоговое окно Page Properties (см. рис. 3.50), для чего выберите пункт Page Properties меню Modify или контекстного меню или нажмите клавиши <Ctrl>+<J>. В поле ввода Background Image введите имя файла фонового изображения или нажмите кнопку Browse и выберите нужный файл в диалоговом окне. После этого нажмите кнопку ОК. Получившийся результат может выглядеть, например, так — см. рис. 4.26. (Автор создал пустую Web-страницу, поместил на нее фрагмент текста этой книги, задал для него в качестве фонового изображения файл J0143756.gif, поставляемый в составе Microsoft Office 2000, и сохранил результат в файле 4.5.htm.)

Рис. 4.26. Web-страница с фоновым изображением

Удачно подобранное фоновое изображение может заметно оживить Web-страницу. Но не следует выбирать в качестве фона слишком яркое или пестрое изображение. Лучше всего сразу после задания фона попробуйте сами почитать текст, выведенный на странице, и оцените, легко ли он читается. Если нет, замените фоновое изображение другим или совсем откажитесь от него. Можно также попытаться подобрать соответствующий цвет текста, чтобы он нормально читался, но не резал глаза. Снова посмотрите на рис. 4.26 — там текст выглядит на фоне достаточно контрастно, чтобы нормально читаться.

Фоновое изображение ведет себя точно так же, как обычные изображения, помещенные на странице: Web-обозреватель сначала загружает HTML-файл страницы, а потом — все сопутствующие файлы, в том числе изображения. Это значит, что какое-то время фон на вашей странице будет отсутствовать. И вам нужно позаботиться о том, чтобы пользователь хотя бы смог прочитать текст вашей страницы. Для этого подберите цвет ее фона, аналогичный общему тону фонового изображения. Так, если фоновое изображение имеет темный тон, задайте для страницы темно-серый, темно-синий или черный цвет фона. И не следует в этом случае оставлять фон страницы белым, т. к. ваш текст тоже, скорее всего, будет белого цвета.