Как сделать 404 страницу для сайта быстрой, компактной и информативной? Наш HTML-код страницы, стили и скрипты помогут вам создать страницу или шаблон для проекта.
Страница 404 является важным функционалом сайта, о котором должен позаботиться каждый уважающий себя вебмастер. Даже не просто позаботиться, а реализовать его таким образом, чтобы посетитель, оказавшийся в нештатной ситуации, не покинул сайт, а продолжил навигацию. Другими словами, качественная страница 404 – это один из показателей того, насколько дружественным к пользователю является ваш сайт.
Такой ответ вы получите от сервера в случае если указанный вами в браузере адрес не существует. Такой сценарий может иметь место в следующих ситуациях:
Так или иначе, если ваш посетитель оказался в подобной ситуации, нельзя оставлять его один на один с “белым экраном смерти”. Стоит предоставить ему возможность как минимум кликнуть мышью по кнопке “Домой”. Как максимум можно предложить перейти на один из важных разделов, открыть страницу контактов или воспользоваться поиском по сайту.
Если не оформить страницу 404, клиент с большой долей вероятности просто закроет окно и уйдет на сайт конкурента.
Способы сделать 404 страницу условно делятся на две группы:
Поскольку движок вашего сайта мне неведом, предложу универсальный способ, который будет работать везде, и, при необходимости, может быть перенесен на функционал движка, под которым работает ваш проект.
Как всегда, начнем с разметки.
Выглядеть наша разметка будет так:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Страница 404</title> <link rel="stylesheet" href="i/bootstrap-reboot.min.css" type="text/css" /> <link rel="stylesheet" href="i/styles.css" type="text/css" /> </head> <body> <div id="preloader"></div> <div id="main"> <div class="content"> <h1>404</h1> <span>Oops!</span> <p> Кажется, Вы ошиблись адресом. <br> Такой страницы не существует, но, возможно, она появится в будущем. </p> <a href="#">Домой</a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="i/particles.min.js"></script> <script type="text/javascript" src="i/particles.settings.js"></script> <script type="text/javascript" src="i/scripts.js"></script> </body> </html>
Краткие пояснения по HTML-коду:
div#preloader
– это реализация прелоадера (preloader), который скроет все неприглядности процесса загрузки ресурсов страницы. Необходим, поскольку все ресурсы мы грузим внизу.bootstrap-reboot.min.css
– это файл-ресет из комплекта Bootstrap. Необходим для сброса основных стилей в единообразное для всех браузеров состояние.styles.css
содержит стили страницы.particles.min.js
и particles.settings.js
– это сам плагин Particles и файл его настроек.scripts.js
– это файл с необходимыми нам скриптами. Фактически здесь только реализация прелоадера.Теперь займемся оформлением.
Прежде, чем стилизовать страницу 404, я нашел в фотобанке Stocksnap подходящий фон для нее и скопировал в папку i
. Теперь сами стили:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); body { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } #preloader { background: #000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; } #main { height: 100vh; background-image: url("back.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; background-blend-mode: overlay; background-color: rgba(0, 0, 0, 0.75); } .content { color: #fff; height: inherit; display: flex; flex-direction: column; justify-content: center; align-items: center; user-select: none; } .content h1 { font-size: 10rem; font-weight: 800; line-height: 8rem; margin: 0 0 1rem; opacity: .5; } .content span { font-size: 2rem; font-weight: 600; margin: 0 0 1rem; } .content p { text-align: center; margin: 0 0 2rem; } .content a { color: #fff; line-height: 3rem; text-decoration: none; padding: 0 2rem; border: 1px solid; border-radius: 1.5rem; display: block; position: relative; z-index: 1; transition: all .5s ease; } .content a:hover { color: #000; background: #fff; } .content + canvas { position: absolute; top: 0; }
И наши комментарии к ним:
@import
подключаем шрифт Montserrat из библиотеки Google Fonts.div#main
также займет весь экран. Фон блока – наше фото. Затемнение реализовано полупрозрачностью черного цвета заливки.div.content
наследует ширину от родителя и имеет flex-модель. Подробно о flex читаем здесь.Все остальное просто и понятно. Обратите внимание на значение свойства z-index
. Я использовал его для того, чтобы элемент canvas
не перекрыл кнопку “Домой”.
Для того, чтобы наше творение заработало, откроем файл .htaccess и добавим в него следующую строку:
ErrorDocument 404 /404.html
Теперь при серверной ошибке 404 будет открыта страница 404.html в корневой папке сайта.
Мы создали и настроили кастомную страницу 404, которая позволит посетителю вернуться на главную страницу сайта. Я не стал размещать на ней форму поиска и блок навигации. Вы сделаете это без большого труда и самостоятельно.
Результат можно увидеть по ссылке внизу страницы. Вы также можете скачать полный архив с демо и кастомизировать его на свое усмотрение.
© 2008 - 2024 Webmasters.BY Все права защищены
Интересное свойство user-select. Не знал про него, хотя уже давно поддерживается основными браузерами.
Новый комментарий