Заглушка — это страница, которую размещают на сайт, когда он недоступен по той или иной причине. Например, когда вы дорабатываете или меняете дизайн сайта и в это время он недоступен или отображается как-то некорректно. Целесообразно будет поставить на это время страницу-заглушку, на которой будет написано, что сайт на обслуживании.
Итак, давайте приступим…
Мы будем делать несложную заглушку с фоновой картинкой и текстом, что сайт находится на обслуживании.
Создадим на компьютере папку, в которую будем помещать все необходимые файлы для нашей заглушки.
В этой папке создадим еще одну папку с названием images. В нее мы поместим нашу фоновую картинку и, возможно, еще и другие картинки, которые могут понадобиться в ходе работы.
Открываем программу Notepad++ (или аналогичную, например Блокнот). Создаем новый документ. Далее — Файл — Сохранить как, выбираем нашу папку с заглушкой и сохраняем документ с названием index.html
Вот что теперь должно быть в нашей папке:
Открываем в нашем редакторе файл index.html (после сохранения он должен быть у вас открыт). Теперь нам надо убедиться, что кодировка этого файла выставлена правильно. Для этого идем в пункт меню «Кодировки» и нажимаем на «Преобразовать в UTF-8″
Чтобы во время работы случайно не потерять достигнутый результат, рекомендую периодически сохранять документ во время работы. Это можно сделать в меню «Файл» или сочетанием клавиш «Ctrl + S».
Пишем в редакторе следующий код:
<html>
<head>
</head>
<body>
</body>
</html>
Из этих тегов состоит любая веб-страница.
Теперь добавим к нашей странице заголовок, ведь будет не очень красиво, когда кто-то откроет ее и увидит в заголовке вкладки браузера index.html (можете открыть страницу в браузере и следить за тем, что получается). Для этого между <head> и </head> добавим следующий код:
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body>
</body>
</html>
Фоновая картинка
Теперь давайте подберем к нашей заглушке фоновую картинку, после чего вернемся к редактированию страницы.
Для этого заходим в Гугл Картинки и ищем интересную картинку, которая могла бы служить фоном для нашей страницы. Важно подбирать картинку шириной не менее 1920 пикселей, чтобы на больших экранах наша страница смотрелась хорошо. Я ввел в поисковую строку 1920 backgrounds и выбрал одну из картинок.
Открываем картинку в полном размере и сохраняем себе в папку images. Затем переименовываем ее. Назовем ее bg (не забываем о формате картинки, в моем случае это jpg).
Вот что я подобрал. Это фото города Чикаго. По-моему вполне подойдет для фонового изображения сайта.
Прикрепляем фоновое изображение к странице, для этого используем стили CSS:
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body style="background: url(images/bg.jpg) top center no-repeat; font-family: Arial; color:#fff;">
</body>
</html>
Также выше я добавил стили для текста, а именно задал шрифт Ариал и белый цвет текста.
Далее создадим блок шириной 900 пикселей, в который поместим наш текст. Выровняем этот блок по центру.
Текст будет состоять из заголовка и, собственно, абзаца текста.
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body style="background: url(images/bg.jpg) top center no-repeat; font-family: Arial; color:#fff;">
<div style="width:900px; margin:0 auto;">
<h1>Сайт на обслуживании, зайдите позже!</h1>
<p>В настоящее время на сайте ведутся технические работы. Зайдите пожалуйста позже или свяжитесь с нами одним из следующих способов:</p>
</div>
</body>
</html>
Вот что получилось:
Теперь добавим наши контакты, чтобы посетители сразу могли связаться с нами, а не ждать пока на сайте закончатся работы.
Добавим 3 блока, в которых будут телефон, электронная почта и скайп.
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body style="background: url(images/bg.jpg) top center no-repeat; font-family: Arial; color:#fff;">
<div style="width:900px; margin:0 auto;">
<h1>Сайт на обслуживании, зайдите позже!</h1>
<p>В настоящее время на сайте ведутся технические работы. Зайдите пожалуйста позже или свяжитесь с нами одним из следующих способов:</p>
<div style="width:33%;">
<p>Тел.: 333-33-33</p>
</div>
<div style="width:33%;">
<p>E-mail: admin@site.ru</p>
</div>
<div style="width:33%;">
<p>Скайп: admsite_ru</p>
</div>
</div>
</body>
</html>
Осталось поработать со стилями.
Увеличим заголовок, выровняем его по центру и опустим ближе к центру экрана.
Увеличим шрифт абзаца текста до двадцати пикселей и сделаем небольшой отступ от заголовка. Также сделаем границу внизу текста, которая отделит его от контактов.
Сделаем блоки с контактами в 3 столбца, увеличим шрифт, выровняем каждый блок по центру и изменим цвет текста.
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body style="background: url(images/bg.jpg) top center no-repeat; font-family: Arial; color:#fff;">
<div style="width:900px; margin:0 auto;">
<h1 style="text-align:center; font-size:46px; margin-top:160px;">Сайт на обслуживании, зайдите позже!</h1>
<p style="font-size:20px; margin-top:50px; border-bottom: 1px solid #fff; padding-bottom:40px;">В настоящее время на сайте ведутся технические работы. Зайдите пожалуйста позже или свяжитесь с нами одним из следующих способов:</p>
<div style="width:33%; float:left; color: #555; text-align:center; font-size:24px;">
<p>Тел.: 333-33-33</p>
</div>
<div style="width:33%; float:left; color: #555; text-align:center; font-size:24px;">
<p>E-mail: admin@site.ru</p>
</div>
<div style="width:33%; float:left; color: #555; text-align:center; font-size:24px;">
<p>Скайп: admsite_ru</p>
</div>
</div>
</body>
</html>
В результате у нас получилась страница-заглушка, которую мы можем использовать, когда на сайте ведутся технические работы.
То, что получилось можно скачать по этой ссылке.
Попробуйте профессиональный хостинг для своего сайта
Спасибо! Помогли. Не то что у другого сайта по выдаче выше.
Супер урок! Всё очень доступно! Всё получилось, но фоновая картинка не появляется, когда вводишь адрес сайта в браузере, только текст…
А если файлик открыть из папки — всё отлично работает. Подскажите, что делать?
Спасибо!
Возможно, вы где-то допустили ошибку, а именно в пятой строке кода, где мы добавляли стиль CSS к нашей странице.
Проверьте внимательно эту строчку у себя, даже какая-то не поставленная кавычка или точка запятой может все испортить и вы не увидите фоновое изображение.
Алексей, все проверила. Все правильно. Даже заменила свою набор на ваш, копированием, все равно отображается только телефон и емайл. Подскажите, пожалуйста, что делать.
да, не грузится картинка( Адрес к изображению в коде правильный, картинка сохранена для веба. Ради эксперимента копировала ваш код — то же самое.
Спасибо огромное! Всё получилось))) Но подскажите, пожалуйста, как поставить ссылки на другой сайт и электронный адрес?
Ребята, подскажите, а как эту заглушку установить на сайт на WP?
А как сделать резиновую заглушку (адаптивную)
?
Спасибо, все просто и доходчиво!
Афффтор, ты конкретный чувак, респект большой!
Спасибо вы мне помогли все очень просто и сердито))))
Спасибо за подробный мануал. Правда пока не пойму, как её поставить. Нужно залить в корень сайта на хостинге?