Погружение в базы данных Oracle
Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.
SQL без слёз
Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.
Урок #5. Вёрстка страницы. Создание темы WordPress.
Главную страницу (index.html) мы отверстали в предыдущем уроке, сейчас приступаем к вёрстке страницы (page.html).
Подготовка к вёрстке
0. Создаём файл page.html в корне нашей темы.
HTML каркас
Скопируем каркас для страницы page.html из файла index.html, а затем внесём несколько небольших изменений.
Находим блок div с классом content. И добавим еще два пустых блока div с классами information-post и text-post. Чтобы получилось следующее.
<div class="content"> <!-- Информация о записи страницы/записи--> <div class="information-post"> </div> <!-- Текст страницы/записи --> <div class="text-post"> </div> </div>
Затем добавим в блок information-post две строки, которые будут выводить название и краткую информацию о странице.
<div class="content"> <!-- Информация о записи страницы/записи--> <div class="information-post"> <h1>Тестовая страница</h1> <p>Опубликовано: 2017-07-24 / Просмотров: 30</p> </div> <!-- Текст страницы/записи --> <div class="text-post"> </div> </div>
В блок text-post добавим основные элементы для форматирования текста, так как они могут понадобиться при написании статей.
<div class="content"> <!-- Информация о записи страницы/записи--> <div class="information-post"> <h1>Тестовая страница</h1> <p>Опубликовано: 2017-07-24 / Просмотров: 30</p> </div> <!-- Текст страницы/записи --> <div class="text-post"> <p>Каждый <a href="">веб-разработчик</a> знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.</p> <h1>Заголовок H1</h1> <h2>Заголовок H2</h2> <h3>Заголовок H3</h3> <h4>Заголовок H4</h4> <h5>Заголовок H5</h5> <h6>Заголовок H6</h6> <p>Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li><a href="">Item 3</a></li> <li>Item 4</li> </ul> <p>Конечно, возникают некоторые вопросы, связанные<sup>2</sup> с использованием<sub>2</sub> Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.</p> <blockquote><p>Рыбным текстом является знаменитый lorem контент. Контент – написание символов на название, не имеет никакого отношения. Возможность получить более длинный неповторяющийся набор.</p></blockquote> <p>И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта.</p> <ol> <li>Item 1</li> <li>Item 2</li> <li><a href="">Item 3</a></li> <li>Item 4</li> </ol> <p>Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.</p> </div> </div>
Вот так выглядит готовый каркас страницы page.html.
<!DOCTYPE html> <html> <head> <!-- Charset --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Page info --> <title>Страница</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="information-post"> <h1>Тестовая страница</h1> <p>Опубликовано: 2017-07-24 / Просмотров: 30</p> </div> <!-- Текст страницы/записи --> <div class="text-post"> <p>Каждый <a href="">веб-разработчик</a> знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.</p> <h1>Заголовок H1</h1> <h2>Заголовок H2</h2> <h3>Заголовок H3</h3> <h4>Заголовок H4</h4> <h5>Заголовок H5</h5> <h6>Заголовок H6</h6> <p>Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li><a href="">Item 3</a></li> <li>Item 4</li> </ul> <p>Конечно, возникают некоторые вопросы, связанные<sup>2</sup> с использованием<sub>2</sub> Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.</p> <blockquote><p>Рыбным текстом является знаменитый lorem контент. Контент – написание символов на название, не имеет никакого отношения. Возможность получить более длинный неповторяющийся набор.</p></blockquote> <p>И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта.</p> <ol> <li>Item 1</li> <li>Item 2</li> <li><a href="">Item 3</a></li> <li>Item 4</li> </ol> <p>Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.</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 стили
Сейчас мы должны написать стили для двух блоков information-post и text-post. В каждом блоке есть дочерние элементы, которые тоже нуждаются в стилизации.
Код css сопровождается комментариями.
Добавьте в файл style.css код, который представлен ниже.
/*Информация о записи страницы/записи*/
.information-post {
width: 670px;
height: auto;
margin: 0 0 30px 0;
}
/*Заголовок записи/страницы*/
.information-post h1 {
font-weight: bold;
font-size: 16px;
color: #333;
line-height: 1;
margin: 0 0 20px 0;
}
/*Мета данные о записи/странице*/
.information-post p {
font-size: 14px;
color: #666;
line-height: 1;
}
/* Текст страницы/записи*/
.text-post {
width: 670px;
height: auto;
margin: 0 0 20px 0;
overflow: hidden;
}
/*стили для заголовков H1-H6*/
.text-post h1, .text-post h2, .text-post h3, .text-post h4, .text-post h5, .text-post h6 {
font-weight: bold;
color: #333;
line-height: 1.5;
margin: 10px 0;
}
.text-post h1 {font-size: 20px;}
.text-post h2 {font-size: 19px;}
.text-post h3 {font-size: 18px;}
.text-post h4 {font-size: 17px;}
.text-post h5 {font-size: 16px;}
.text-post h6 {font-size: 15px;}
.text-post p {/*стили для абзаца*/
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 10px 0;
}
.text-post p a {
color: #2d3e50;
text-decoration: underline;
}
.text-post p a:hover {
color: #666;
text-decoration: none;
}
.text-post img {/*стили для изображений*/
display: block;
vertical-align: bottom;
}
.text-post .aligncenter {/*выравнивание изображения по центру*/
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.text-post .alignleft {/*выравнивание изображения по левому краю*/
float: left;
margin-left: 0px;
margin-right: 10px;
}
.text-post .alignright {/*выравнивание изображения по правому краю*/
float: right;
margin-left: 10px;
margin-right: 0px;
}
.text-post ul {/*стили для маркированного списка*/
list-style-type: disc;
margin: 0 0 0 30px;
}
.text-post ul li {
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 10px 0;
}
.text-post ul li a {
color: #2d3e50;
text-decoration: underline;
}
.text-post ul li a:hover {
color: #666;
text-decoration: none;
}
.text-post ol {/*стили для нумерованного списка*/
list-style-type: decimal;
margin: 0 0 0 30px;
}
.text-post ol li {
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 10px 0;
}
.text-post ol li a {
color: #2d3e50;
text-decoration: underline;
}
.text-post ol li a:hover {
color: #666;
text-decoration: none;
}
.text-post blockquote {/*Цитата*/
border-left: 2px solid #FFD15C;
margin: 0 0 0 15px;
padding: 0 0 0 10px;
}
.text-post blockquote p {
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 0 0;
}
.text-post blockquote p a {
color: #2d3e50;
text-decoration: underline;
}
.text-post blockquote p a:hover {
color: #666;
text-decoration: none;
}
.text-post sup {/*Верхний индекс*/
position: relative;
top: -6px;
font-size: 12px;
}
.text-post sub {/*Нижний индекс*/
position: relative;
top: 6px;
font-size: 12px;
}
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: Wordpress, Создание темы.
