Погружение в базы данных Oracle
Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.
SQL без слёз
Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.
Урок #9. Вёрстка страницы 404. Создание темы WordPress.
Страница 404 отображается пользователю только в том случае, когда он перешёл по не правильному или не существующему адресу.
Подготовка к вёрстке
0. Создаём копию файла page.html и переименовываем её в 404.html.
HTML каркас
Открываем файл 404.html для внесения изменений.
Удаляем полностью div с классом information-post, а вместо него добавляем другой div с классом title-404.
<!-- Область для вывода контента --> <div class="content"> <!-- Информация о записи страницы/записи--> <div class="title-404"> </div>
Вставляем в блок с классом title-404 строку с заголовком страницы.
<!-- Область для вывода контента --> <div class="content"> <!-- Информация о записи страницы/записи--> <div class="title-404"> <h1>Ошибка #404 - Ничего не найдено</h1> </div>
Блок text-post очищаем от лишнего текста, и добавляем два абзаца с нужной информацией.
<!-- Текст страницы/записи --> <div class="text-post"> <p>Извините, запрашиваемая страница не найдена!</p> <p>Попробуйте вернуться на <a href="">главную страницу</a>, и повторите поиск.</p> </div>
Готовый каркас страницы 404.html.
<!DOCTYPE html> <html> <head> <!-- Charset --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Page info --> <title>404 страница</title> <meta name="language" content="ru"> <!-- Favicon --> <link rel="shortcut icon" href="favicon/favicon.png" type="image/png"> <link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" sizes="60x60" href="favicon/favicon_apple_60.png"> <link rel="apple-touch-icon" sizes="76x76" href="favicon/favicon_apple_76.png"> <link rel="apple-touch-icon" sizes="120x120" href="favicon/favicon_apple_120.png"> <link rel="apple-touch-icon" sizes="152x152" href="favicon/favicon_apple_152.png"> <!-- Style CSS--> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <!-- JQuery Library --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> </head> <body> <!-- Обёртка --> <div id="wrapper"> <!-- Шапка --> <div class="header"> <!-- Название блога и описание --> <div class="bloginfo"> <h1><a href="">Блог Артёма Санникова</a></h1> <p>Подробные пошаговые обучающие уроки по сайтостроению и продвижению.</p> </div> <!-- Навигация --> <div class="nav"> <ul> <li class="current_page_item"><a href="">Главная</a></li> <li><a href="">Об авторе</a></li> <li><a href="">Контакты</a></li> <li><a href="">Карта сайта</a></li> </ul> </div> </div> <!-- Область для вывода контента --> <div class="content"> <!-- Информация о записи страницы/записи--> <div class="title-404"> <h1>Ошибка #404 - Ничего не найдено</h1> </div> <!-- Текст страницы/записи --> <div class="text-post"> <p>Извините, запрашиваемая страница не найдена!</p> <p>Попробуйте вернуться на <a href="">главную страницу</a>, и повторите поиск.</p> </div> </div> <!-- Боковая колонка --> <div class="sidebar"> <div id="title-widget"> <h6>CMS системы</h6> </div> <div class="widget_nav_menu"> <ul> <li><a href="">Wordpress</a> <ul class="sub-menu"> <li><a href="">Настройки</a></li> <li><a href="">Функции</a></li> <li class="current-menu-item"><a href="">Плагины</a></li> <li><a href="">Хаки</a></li> <li><a href="">Создание темы</a></li> </ul> </li> <li><a href="">Программы</a> <ul class="sub-menu"> <li><a href="">Google Chrome</a></li> <li><a href="">Balsamiq Mockups</a></li> <li><a href="">Sublime Text</a></li> <li><a href="">Adobe Photoshop</a></li> </ul> </li> </ul> </div> <div id="title-widget"> <h6>Текстовый блок</h6> </div> <div class="textwidget"> <p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он <a href="">веб-дизайнерами</a> для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. </p> </div> <div id="title-widget"> <h6>Изображение</h6> </div> <div class="textwidget"> <center><img src="//artemsannikov.ru/mc/40collage-instagram/images/box.png" width="200"></center> </div> </div> <!-- Подвал--> <div class="footer"> <p>Использование и копирование материалов сайта без согласия автора категорически запрещено.</p> <p>Артём Санников © 2014 - 2017</p> </div> </div> </body> </html>
CSS стили
Ниже представлен код css для оформления блока с классом title-404.
Добавьте код в файл style.css.
/*Заголовок страницы 404*/
.title-404 {
width: 670px;
height: auto;
margin: 0 0 20px 0;
overflow: hidden;
}
/*Заголовок записи/страницы*/
.title-404 h1 {
font-weight: bold;
font-size: 16px;
color: #333;
line-height: 1;
}
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: Wordpress, Создание темы.
