Погружение в базы данных Oracle
Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.
SQL без слёз
Цель книги заключается в том, чтобы научить любого человека работать с реляционными базами данных и получать из них необходимую информацию посредством выполнения SQL-запросов.
Урок #4. Вёрстка главной страницы. Создание темы WordPress.
Итак, дизайн для темы WordPress готов. Сейчас мы будем верстать главную страницу, то есть переводить изображение в html страницу. В первую очередь мы создаём html каркас страницы, а затем пропишем стили для каждого идентификатора и класса.
Подготовка к вёрстке
Для того, чтобы начать вёрстку подготовим необходимые директории и файлы.
0. Создаем папку FirstTheme (название нашей темы), открываем ее, и дальше создаём все директории и файлы по инструкции.
1. Создаём папку favicon и загружаем в неё 6 иконок, со следующими параметрами:
- favicon.ico (размер 16×16);
- favicon.png (размер 48×48);
- favicon_apple_60.png (размер 60×60);
- favicon_apple_76.png (размер 76×76);
- favicon_apple_120.png (размер 120×120);
- favicon_apple_152.png (размер 152×152).
2. Создаём пустую папку images.
3. Создаём файл .htaccess со следующим содержимым:
AddDefaultCharset utf-8 AddCharset utf-8 * <IfModule mod_charset.c> CharsetSourceEnc utf-8 CharsetDefault utf-8 </IfModule> #Запрет на чтение всех дирректорий Options All -Indexes #Защита .htaccess <Files ~ "^.*\.([Hh][Tt][Aa])"> order allow,deny deny from all satisfy all </Files>
4. Создаём файл reset.css со следующим содержимым:
html, body, div, span, applet, object, iframe, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
border:1px solid #dedede;
}
td {
border:1px solid #dedede;
}
5. Создаём пустой файл index.html.
6. Создаём файл style.css со следующим содержимым:
/* Theme Name: First Theme #Название темы Theme URI: //artemsannikov.ru #Адрес темы где ее можно скачать Description: Простая минималистичная тема для WordPress. #Описание темы Author: Artem Sannikov #Автор (разработчик) темы Author URI: //artemsannikov.ru #Адрес автора темы Tags: Sidebar, White, Adaptive, Minimalism #Теги описывающие вашу тему Version: 1.0 #Версия темы */
Важный момент: решетки и текст после них нужно удалить, чтобы получился вот такой вариант.
/* Theme Name: First Theme Theme URI: //artemsannikov.ru Description: Простая минималистичная тема для WordPress. Author: Artem Sannikov Author URI: //artemsannikov.ru Tags: Sidebar, White, Adaptive, Minimalism Version: 1.0 */
HTML каркас
Каркас страницы будет состоять из пяти основных блоков: шапка, вывод записей, боковая колонка, постраничная навигация и подвал. Давайте я подробно опишу, что включает в себя каждый блок.
- Шапка (название сайта, краткое описание и навигационное меню);
- Вывод записей (отображаются последние записи добавленные на сайт);
- Боковая колонка (будет включать в себя различные виджеты, как например: текст, произвольное меню и др.);
- Постраничная навигация (выводит список всех страниц на сайте);
- Подвал (выводится статическая текстовая информация и copyright).
Открываем файл index.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="box-post"> <!-- Миниатюра записи--> <div class="thumbnail-post"> <img src="//artemsannikov.ru/wp-content/uploads/2017/07/install-xampp-windows-130x130.jpg" width="130" height="130"> </div> <!-- Описание записи--> <div class="description-post"> <h2><a href="">Установка локального web-сервера Xampp</a></h2> <p class="info-post">Категория: Xampp / Опубликовано: 2017-07-24 / Просмотров: 30</p> <p>Xampp — кроссплатформенный web-сервер поддерживающий множество готовых библиотек, которые позволяют развернуть полноценный web-сервер на вашем компьютере.</p> <a href="" class="readmore">Читать далее..</a> </div> </div> <!-- Постраничная навигация--> <div id="page-navi"> <span class="page-numbers current">1</span> <a class="page-numbers" href="">2</a> <a class="page-numbers" href="">3</a> <a class="page-numbers" href="">4</a> <a class="page-numbers" href="">5</a> <a class="page-numbers" href="">6</a> <a class="page-numbers" href="">7</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="">42</a> <a class="next page-numbers" href="">»</a> </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 стили
Каркас html готов, приступаем к оформлению css. Для того, чтобы вы понимали что это за блок стилей и к чему он относится я оставил комментарии, которые будут вам хорошим подспорьем.
Открываем файл style.css и вставляем него следующий код.
/*
Theme Name: First Theme
Theme URI: //artemsannikov.ru
Description: Простая минималистичная тема для WordPress.
Author: Artem Sannikov
Author URI: //artemsannikov.ru
Tags: Sidebar, White, Adaptive, Minimalism
Version: 1.0
*/
/*Подключение шрифта Open Sans с Fonts.Google.com*/
@import url('//fonts.googleapis.com/css?family=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #333;
background: #f9f9f9;
}
img {
max-width: 100%;
height: auto;
}
/*Обёртка*/
#wrapper {
width: 1000px;
height: auto;
margin: 0 auto;
background: #fff;
overflow: hidden;
box-shadow: 0 0 3px #dcdcdc;
outline: 0px solid red;
}
/*Шапка*/
.header {
width: 1000px;
height: 140px;
border-bottom: 1px solid #eee;
overflow: hidden;
}
/*Название блога и описание*/
.bloginfo {
float: left;
width: 300px;
height: 60px;
margin: 40px 0 0 30px;
}
.bloginfo h1 {
font-size: 16px;
font-weight: bold;
margin: 0 0 10px 0;
}
.bloginfo h1 a {
color: #333;
text-decoration: none;
}
.bloginfo h1 a:hover {
color: #2d3e50;
}
.bloginfo p {
font-size: 14px;
color: #666;
line-height: 1.3;
}
/*Навигация*/
.nav {
float: right;
margin: 55px 20px 0 0;
}
.nav ul {
list-style-type: none;
list-style-position: inside;
}
.nav ul li {
display: inline-block;
font-size: 14px;
line-height: 1;
}
.nav ul li a {/*ссылка в пассивном состоянии*/
color: #333;
margin: 0 0 0 15px;
text-decoration: none;
padding: 5px 10px;
}
.nav ul li.current_page_item a {/*активная ссылка*/
background: #2d3e50;
color: #fff;
border-radius: 3px;
}
.nav ul li a:hover {/*ссылка при наведении*/
background: #eee;
color: #333;
border-radius: 3px;
}
/*Область для вывода контента*/
.content {
float: left;
width: 670px;
height: auto;
margin: 30px 30px;
overflow: hidden;
outline: 0px solid blue;
}
/*Вид записи*/
.box-post {
width: 670px;
height: auto;
margin: 0 0 30px 0;
padding: 0 0 30px 0;
overflow: hidden;
border-bottom: 1px solid #eee;
}
/*миниатюра записи*/
.thumbnail-post {
float: left;
width: 136px;
height: 136px;
margin: 0 20px 0 0;
}
.thumbnail-post img {
display: block;
vertical-align: bottom;
padding: 2px 2px;
border: 1px solid #dfdfdf;
background: #fff;
border-radius: 50%;
}
/*описание записи*/
.description-post {
float: right;
width: 514px;
height: auto;
}
.description-post h2 {
font-size: 16px;
font-weight: bold;
line-height: 1;
margin: 0 0 20px 0;
}
.description-post h2 a {
text-decoration: none;
color: #333;
}
.description-post h2 a:hover {
color: #2d3e50;
}
.description-post p.info-post {
font-size: 14px;
color: #666;
line-height: 1;
margin: 0 0 30px 0;
}
.description-post p {
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 0 0 30px 0;
}
.description-post a.readmore {
display: inline-block;
padding: 8px 12px;
border-radius: 2px;
background: #FFD15C;
line-height: 1;
font-size: 14px;
color: #333;
text-decoration: none;
}
.description-post a.readmore:hover {
background: #2d3e50;
color: #fff;
}
/*Постраничная навигация*/
#page-navi {
width: 670px;
height: auto;
}
/*Ссылка на страницу*/
#page-navi a.page-numbers {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #666;
padding: 6px 9px;
border: 1px solid #dfdfdf;
border: 0;
margin: 0 0 0 5px;
text-decoration: none;
}
#page-navi a.page-numbers:hover {
color: #2d3e50;
border: 1px solid #2d3e50;
padding: 5px 8px;
}
/*Активная ссылка*/
#page-navi .page-numbers.current {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #2d3e50;
padding: 5px 8px;
margin: 0 0 0 10px;
border: 1px solid #2d3e50;
background-color: #fff;
cursor: default;
}
/*Страница N из N*/
#page-navi span.pages {
font-size: 14px;
line-height: 1;
color: #666;
}
/*Боковая колонка*/
.sidebar {
float: right;
width: 240px;
height: auto;
margin: 30px 30px 30px 0;
outline: 0px solid red;
}
/*заголовок виджета*/
#title-widget {
width: 240px;
height: auto;
margin: 0 0 30px 0;
}
#title-widget h6 {
font-weight: bold;
font-size: 16px;
color: #333;
line-height: 1;
}
/*виджет - текст*/
.textwidget {
width: 240px;
height: auto;
margin: 0 0 30px 0;
}
.textwidget p {
font-size: 14px;
color: #666;
line-height: 1.5;
}
.textwidget p a {
color: #2d3e50;
text-decoration: underline;
}
.textwidget p a:hover {
color: #666;
text-decoration: none;
}
.textwidget img {
display: block;
vertical-align: bottom;
}
/*Виджет - произвольное меню*/
.widget_nav_menu {
width: 240px;
height: auto;
margin: 0 0 30px 0;
}
.widget_nav_menu ul {
list-style-type: none;
list-style-position: inside;
}
.widget_nav_menu ul li {
font-size: 14px;
color: #666;
}
.widget_nav_menu ul li a {
display: list-item;
color: #666;
text-decoration: none;
margin: 0 0 15px 0;
}
.widget_nav_menu ul li.current-menu-item a {/*активная категория или страница*/
color: #2d3e50;
text-decoration: underline;
}
.widget_nav_menu ul li a:hover {/*ссылка при наведении*/
color: #333;
text-decoration: underline;
}
/*древовидный список*/
.widget_nav_menu ul.sub-menu {
margin: 0 0 0 15px;
}
.widget_nav_menu ul.sub-menu a:after {/*стилизация ссылки древовидного списка*/
float: left;
content: "-";
font-size: 14px;
color: #666;
margin: 0 5px 0 0;
}
.widget_nav_menu ul.sub-menu li.current-menu-item a {/*активная категория или страница*/
color: #2d3e50;
text-decoration: underline;
}
.widget_nav_menu u.sub-menul li a:hover {/*ссылка при наведении*/
color: #333;
text-decoration: underline;
}
/*Подвал*/
.footer {
width: 1000px;
height: auto;
border-top: 1px solid #eee;
padding: 30px 0;
overflow: hidden;
}
.footer p {
font-size: 14px;
color: #666;
line-height: 1;
margin: 0 0 10px 0;
text-align: center;
}
.footer p:last-child {/*убираем отступ у последнего абзаца*/
margin: 0 0 0 0;
}
С уважением, Артём Санников
Сайт: ArtemSannikov.ru
Метки: Wordpress, Создание темы.
