Красивая 404 страница

  Александр Маврин   8 комментариев

Страница 404Приветствую всех, кто зашел на SerBlog.ru. Сегодня речь пойдет о странице 404. Для тех кто не знает, что такое страница 404, объясню. Вы наверняка видели уже такую надпись: 404 Not Found, когда заходили на какой-нибудь сайт. Это специальный код ошибки сервера, если он не может найти запрашиваемую страницу. Если она была перемещена по другому адресу или удалена, то серверу ничто не остается, как показать страницу 404 с надписью о том, что запрашиваемый документ не найден. При создании нового сайта на сервере, эта страница создается автоматически и по умолчанию уже имеется. Как правило, эта страница имеет одну единственную надпись 404 Not Found. Это обычная HTML страница. Ее исходный код имеет примерно такой вид:

<html>
<head></head>
<body>
<center><h1>404 Not Found</h1></center>
<hr />
</body>
</html>

Чтобы узнать, как выглядит ваша страница ошибки 404, поставьте курсор в адресную строку в конец адреса вашего сайта и наберите любые символы. Можно просто пальцами нажать на любые клавиши и нажать Enter
Такой вариант вида страницы не очень хороший. Так как пользователь просто закрывает ее и уходит восвояси. Но наша задача удержать его любыми способами. 🙂 Ведь можно самим создать страницу 404 и красиво ее оформить. Вариантов оформления страницы существует огромное множество. Как говорится, кто во что горазд. Но достаточно просто скачать готовый шаблон страницы 404 и залить к себе на сервер. Главное, это поставить ссылку на главную страницу сайта, чтобы у пользователя был выбор, уйти или все же зайти на сайт. Если страница будет оформлена красиво, то шансов больше, что пользователь перейдет по ссылке.

О том, как интегрировать страницу 404 в дизайн сайта, я расскажу в другой раз, а сейчас будем делать именно отдельную страницу ошибки 404.

Если вам понравится моя страница, то можете ее забрать и поставить себе. На странице присутствует:

  • Основной блок содержимого с тенью
  • Картинка-надпись 404 Not Found
  • Картинка-надпись Сожалеем, но такой страницы здесь нет
  • Кнопка-картинка, меняющаяся при наведении со ссылкой на главную страницу
  • Небольшой JavaScript эффект

Итак, чтобы вы смогли установить эту страничку к себе, нужно, во-первых, поменять ссылку на главную страницу. Для этого открываете страницу в текстовом редакторе и ищете ссылку на serblog.ru. Меняете ее на свою. Затем заливаете картинки. Прописываете путь до картинок. Для фона найдите эту строчку:

background: url(bg.png);

Для картинки 404 Not Found:

background: url(404.png);

Скачать страницу 404 и залить в корень сайта. Присылайте ссылки, посмотрим, как работает ваша страница. Если что-то непонятно, спрашивайте в комментариях.

ДемоСКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо

8 комментариев
  1. Кнопочку «перейти на главную» посимпатичнее бы сделать. Не гармонирует со всей сраницей.

  2. Согласен с «Делитантом». Страница 404 сообщение выдала и посетитель с сайта ушел. Ваша задача удержать его на сайте, поэтому должен предложить альтернативные варианты задержать его на сайте. Вам необходимо в статье отметить это или в продолжении данной статьи

  3. Для сервера типа Apache должен быть файл у папки со страницами сайта и названием
    «.htaccess» и содержанием файла хотя бы:

    ErrorDocument 404 /?error=404

  4. Страница 404 была полностью переработана. Современные тенденции веб-дизайна требуют постоянного движения вперед. 🙂 Старую страницу можно посмотреть здесь.

  5. Мария:

    Спасибо за статью . Познавательно!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *