Как создать заглушку для сайта

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

Итак, давайте приступим…

Мы будем делать несложную заглушку с фоновой картинкой и текстом, что сайт находится на обслуживании.

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

В этой папке создадим еще одну папку с названием images. В нее мы поместим нашу фоновую картинку и, возможно, еще и другие картинки, которые могут понадобиться в ходе работы.

Открываем программу Notepad++ (или аналогичную, например Блокнот). Создаем новый документ. Далее — Файл — Сохранить как, выбираем нашу папку с заглушкой и сохраняем документ с названием index.html

Вот что теперь должно быть в нашей папке:

Открываем в нашем редакторе файл index.html (после сохранения он должен быть у вас открыт). Теперь нам надо убедиться, что кодировка этого файла выставлена правильно. Для этого идем в пункт меню «Кодировки» и нажимаем на «Преобразовать в UTF-8″

Чтобы во время работы случайно не потерять достигнутый результат, рекомендую периодически сохранять документ во время работы. Это можно сделать в меню «Файл» или сочетанием клавиш «Ctrl + S».

Пишем в редакторе следующий код:

Из этих тегов состоит любая веб-страница.

Теперь добавим к нашей странице заголовок, ведь будет не очень красиво, когда кто-то откроет ее и увидит в заголовке вкладки браузера index.html (можете открыть страницу в браузере и следить за тем, что получается). Для этого между <head> и </head> добавим следующий код:

<html> <head> <title>Сайт находится на обслуживании</title> </head> <body> </body> </html>

Фоновая картинка

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

Для этого заходим в Гугл Картинки и ищем интересную картинку, которая могла бы служить фоном для нашей страницы. Важно подбирать картинку шириной не менее 1920 пикселей, чтобы на больших экранах наша страница смотрелась хорошо. Я ввел в поисковую строку 1920 backgrounds и выбрал одну из картинок.

Открываем картинку в полном размере и сохраняем себе в папку images. Затем переименовываем ее. Назовем ее bg (не забываем о формате картинки, в моем случае это jpg).

Вот что я подобрал. Это фото города Чикаго. По-моему вполне подойдет для фонового изображения сайта.

Прикрепляем фоновое изображение к странице, для этого используем стили CSS:

Также выше я добавил стили для текста, а именно задал шрифт Ариал и белый цвет текста.

Далее создадим блок шириной 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>

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

📎📎📎📎📎📎📎📎📎📎