Php–документ также может содержать графическую и аудио-информацию, созданную при помощи различных редакторов.




 

Глава 2. Специальная (практическая) часть

Целью моей курсовой работы является разработка сайта библиотеки с использованием изученных приёмов программирования на HTML и  PHP с применением таблиц стилей на CSS и создания внешней базы данных библиотеки (книг, авторов, тематик, заголовком, файлов иллюстраций, звукових фрагментов и т.д.) MySQL, хранимой на сервере.

 

2.1 Инструментарий для создания Web-страниц

В процессе создания сайта мною были изучены принципы работы со следующими программными продуктами: редактор текста  Brackets (см.рис.4), графические редакторы GIMP (см.рис.5) и Paint для обработки иллюстраций и картинок, используемых при оформлении сайта и текстовой части курсового проекта. При создании базы данных библиотеки использовался псевдо-сервер localhost XAMMP (см.рис.6), с помощью которого и были созданы внешние таблицы с данными по содержащимся в библиотеке книгам, авторам, темам, ключевым словам и т.д.

 

      2.1.1 HTML-редакторы

При написании программной части моей курсовой работы использовался общедоступный свободный текстовый редактор для веб-разработчиков- Brackets, который ориентирован на работу с документами HTML,PHP, CSS и JavaScript и  экранное отображение которого показано на рисунке 7.  Удобное приложение позволяет не только открывать для редактирования и просмотра файлы из рабочего каталога, но и запускать полученный код, интерпретируемый браузером, то есть в том виде, в котором он будет восприниматься пользователем сайта.

Brackets работает только с Google Chrome. Внося какие-либо изменения в код в редакторе — в окне браузера автоматически отображаются изменения. Удобен он ещё и тем, что дает подсказки при редактировании CSS, JS и HTML-файлов, подсветку синтаксиса. Огромное количество плагинов (спецприложений) позволяет превратить данный текстовый редактор в мощный комбайн для WEB-разработки.

 

Рис.7 Экранное отображение редактора Brackets

 

Brackets визуализирует работу файловой системы, предлагает список открытых файлов над деревом – в левой части экрана, на рабочем поле разными цветами выделяются теги, классы, примечания, ссылки на url и прочее.

Программа поддерживает множество языков, и можно легко скачать Brackets на русском прямо с официального сайта brackets.io.

 

      2.1.2 Графические редакторы

Для обработки иллюстраций и картинок, используемых при оформлении сайта и текстовой части курсового проекта используем графические редакторы GIMP (см.рис.8)- растровый графический редактор, программа для создания и обработки растровой графики и частичной поддержкой работы с векторной графикой и Microsoft Paint — многофункциональный, но в то же время довольно простой в использовании растровый графический редактор компании Microsoft, входящий в состав всех операционных систем Windows, начиная с первых версий.

 

Рис.8 Экранное отображение графического редактора GIMP

 

GIMP — свободный графический редактор, который поддерживает больше тридцати форматов изображений, умеет работать со слоями, масками, фильтрами и режимами смешивания. В арсенале программы есть огромный спектр инструментов для цветокоррекции и обработки любых фотографий и изображений. Благодаря удобному интерфейсу и русскоязычной версии, я научился работать в GIMP самостоятельно, используя справочную информацию. Я установил на своем домашнем компьютере версию программы 2.10.4, которая находится в свободном доступе в сети Интернет, на официальном сайту http://www.gimp.org/ . Программа GIMP кроссплатформенная, то есть подходит для различных операционных систем.

Изображение — основной объект, с которым работает GIMP. Под словом изображение подразумевается один файл с расширением TIFF, PNG или JPEG. Нельзя открыть в одном окне более одного изображения, и нельзя работать с изображением без отображающего его окна. Изображение в GIMP может быть достаточно сложным. Наиболее правильной аналогией будет не лист бумаги, а, скорее, книга, страницы которой называются слоями.

Простейшее изображение содержит только один слой и, продолжая аналогию, является листом бумаги. Слои могут быть прозрачными и могут покрывать не все пространство изображения.

В GIMP каналы являются наименьшей единицей подразделения стека слоев, из которых создается изображение. Каждый канал имеет тот же размер, что и слой, и состоит из тех же пикселей. Смысл этого значения зависит от типа канала, например, в цветовой модели RGB значение канала R означает количество красного цвета, добавляемого к другим цветам пикселей

GIMP поддерживает графические форматы GIF (включая анимацию), JPEG, PNG, PNM, XPM, TIFF, TGA, MPEG, PS, PDF, PCX, BMP, SGI, SunRas, XPM (формат, в котором хранятся пиктограммы X Window). Кроме того, программа работает с архивированными изображениями (формат gzip), а также позволяет отправить произведение своего искусства по электронной почте, указав лишь адрес получателя. Основной внутренний формат GIMP, в котором хранятся изображения, называется XCF.

Одним из недостатков GIMP, на мой взляд, является неудобство работы с текстовыми полями. Вставку текста легче и удобнее осуществить в редакторе Paint. В нем также удобно работать с готовыми картинками, которые не нужно преобразовывать или корретировать, а только обрезать или масштабировать.

 

2.1.3 Редактор мультимедийных файлов

Для иллюстрации возможностей моей библиотеки я использовал фрагменты звуковых файлов – отрывки начитанных декламаторами книг, если нашёл. Использовались бесплатные общедоступные ресурсы сети. Так как обычно книги содержат файлы большого объема, то для сокращения времени вызова и скорости обработки доступа я вырезал фрагменты мультимедиа, используя приложение mp3DirectCut (см.рис.9)

 

Рис.9 Экранная копия программы мультимедийного редактора MP3DirectCut

 

Мp3DirectCut – бесплатный компактный аудиоредактор форматов WAV,AAC и MP3 с отсутствием сжатия во время обработки и отличным качеством файла на выходе.

Я установил его с сайта https://tvoiprogrammy.ru/mp3directcut. Несложный обработчик файла, дает возможность вырезать фрагмент файла и сохранить в удобном формате.

 

2.1.4 Создание и обработка базы данных

Так как в курсовом проекте мне требовалось создать программный код с использование PHP-кода и разработать пробную базу данных MySQL – я использовал программу XAMPP, которая является самой популярной средой разработки PHP. XAMPP - кроссплатформенная сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP, язык программирования Perl и большое количество дополнительных библиотек, позволяющих запустить полноценный веб-сервер (см.рис.10).

 

Рис.10 Экранное отображение работы с БД в среде хостинга XAMMP

 

Название XAMPP - это аббревиатура (X — все операционные системы, Apache,MariaDB,PHP,Perl), полностью бесплатный и простой в установке дистрибутив, создан с открытым исходным кодом, чтобы быть невероятно простым в установке и в использовании.

Я установил версию XAMPP для Windows7.2.12 (PHP 7.2.12) с официального сайта https://www.apachefriends.org/ru/index.html

База данных организована следующим образом: исходных таблиц данных четыре, а именно (см.рис.11) таблица авторов autors_book, сама библиотека книг  book, свод жанров  janr_book, и серия книг для многотомника- seria_book.Еще предполагается для создания картотеки пользователей таблица people, но это в перспективе разработки.

 

Рис.11. Обзор используемых связанных таблиц в БД

Основной таблицей моей БД является сводная таблица book, структура которой указана на рисунке 12. От таблиц авторов, серий и жанров с ней связаны их ключевые поля.

Каждая запись в данной таблице уникальна и содержит полную информацию о книге, находящейся в библиотеке. Редактирование и заполнение ее полей также производилось в указанном приложении.

 

Рис.12. Структура основной таблицы БД – book.

В отдельных каталогах хранятся специально отобранные для курсового проекта тексты книг, обложки и звуковые файлы, если они есть. Информацию для заполнения данных по каждой книге я взял из свободного доступа в сети.

 

2.2 Создание Web-страниц

Приступая к курсовой работе по созданию сайта библиотеки я разработал и создал, используя установку библиотеки приложение XAMMP, на жестком диске свой каталог, в корне которого разместились *.html  и *.php файлы страниц моего сайта. Также в корневом каталоге находятся библиотечные каталоги для текстовых файлов, рисунков, звуковых файлов, документов к курсовомц проекту.

Стартовым является файл index.html, в ктором описана страница-приглашение (портфолио) моего проекта(см.рис.13). Все оформление страницы - графические стили текста, вынесены в файл lib/css/style_b.css, в котором описаны форматы исходных и находящихся в фокусе картинок, ссылок, а также разметка на сектора заголовка, середины и подвала сайта. В футере (подвале) страницы размещены пиктограммы-ссылки на соцсети и электронную почту, а также размещена моя подпись.

Рис.13 Стартовая страница курсового проекта- сайта библиотеки

 

Со стартовой странице по ссылкам можно перейти на страницы с курсовым заданием, непосредственно на сайт библиотеки и на пояснительную записку к проекту. При этом «Мое задание» подгружает документ в формате .htm, а «Мое описание сайта» - в формате текстового документа .doc для ознакомления. А ссылка «Моя библиотека» переходит на страницу моей библиотеки.

 

2.3 Основная концепция сайта

В моем курсовом проекте осуществлена попытка создания удобного интерфейса сайта-библиотеки для поиска, ознакомления с аннотацией, чтения книг в удобном для меня формате и даже прослушивания фрагментов озвученного артистами текста выбранной книги.

Книгу можно выбрать или найти используя два варианта: по жанрам и по фамилии автора. На главной странице (см.рис.14) видно, что в меню доступен поиск по сгруппированным первым буквам фамилии автора. Если искать по жанрам, то в первом пункте меню произойдет переход по ссылке на вторую страницу (см.рис.15). там ниспадающее меню укажет перечень жанров, выбрав один из которых посетитель сайта перейдет на подборку книг одного жанра.

Третьим вариантом работы с меню будет возврат на стартовую страницу курсового проекта.

 

 2.4 Общее содержание сайта

На рисунке 14 показана первая (главная) страница сайта-библиотеки. Она представляет собой перечень имеющихся в наличии книг, разделенных по жанрам и авторам.

Вверху, в заголовке страницы находится строчное меню с ниспадающими списками ссылок по фамилиям авторов, разбитых по заглавным буквам фамилий и сгруппированным примерно по объему (заполняемости) книгохранилища для удобства поиска.

 

Рис.14 Главная страница сайта библиотеки с поиском по авторам

 

Для поиска или отбора книг по жанрам содержимого библиотеки используется первая вкладка меню, которая отсылает на вторую страницу, дающую возможность такого поиска и сортировки (см.рис.16).

Рис.15 Вторая страница сайта библиотеки с поиском по жанру книги

 

Когда книга найдена – посетитель может посмотреть аннотацию к выбранной книге. Для этого нажатием на обложку книги осуществится переход по ссылке на файл аннотации, оформленный и выделенный в отдельное окно, выплывающее поверх изображения текущего каталога книг (см.рис.16). Прочитав его можно закрыть и вернуться в исходный каталог.

Рис.16. Открытие аннотации к выбранной книге

В поле аннотации в верхней его правой части расположены две кнопки, при нажатии на которые можно открыть текст книги (см.рис.17) или прослушать фрагмент звукового файла книги.

Рис.17 Отформатированный текст выбранной книги

 

Для размещения книг в мою библиотеку текст, картинки обложки и звуковые фрагменты были специально подготовлены, как описано в п.п.2.1.1.-2.1.4 данной работы. Все использованные материалы были получены в общем доступе без нарушения авторских прав.

 

2.5 Дизайн сайта

Для оформления моего сайта библиотеки мной была выбрана определенная, приятная для посетителя бордовая цветовая гамма. Фоном выбрано однотоное поле, слева размещено изображение книг библиотека, а центральная часть включает в себя вейер обложек книг, отсортированный изначально по авторам или жанрам (см.рис.14-15). Для ознакомления с отдельной книгой можно осуществить последством нажатия на обложку (см.рис.16). При обработке этоцй функции на экран выводится блок аннотации, оформленный в едином с сайтом стиле. Меню задействовано многоуровневое, в ниспадающим списком и алфавитным отбором поиска по инициалам фамилии автора. Если книга выбрана для дальнейшего чтения, то при нажатии на значек с открытой книгой – будет открым html-документ с текстом книги, также оформленной в едином для библиотеки стилем и ниспадающим меню глав.(см.рис.17). Предусмотрено также прослушивание отрывка звукового варианта библиотечной книги.

Язык CSS расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру сайта.

При создании стартовой страницы курсового проекта (см.рис.13) программно изображение разбито на несколько логических блоков. Верхняя часть страницы содержит заголовок (см. прил.1), включающий в себя фоновое изображение, фамилию автора сайта и назначение данной страницы – коммент к работе.

 


.header, .header_book {

background: #58330f;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

width: 100%;

display: flex;

flex-direction: column;

position: fixed;

left: 0;

z-index: 9999; }

.header { 

background-image: url(../pic/vr_header.png);

height: 120px;

justify-content: center;

text-align: center;

align-items: center;   }

.punkt_title{

color: #241302;

font-size: 15px;

  font-style:italic; }

 

Рис.18 Фрагмент css-файла к сайту

В таблице стилей lib/css/style_b.css описываются параметры каждого элемента декора, формат текста, расположение на экране. На рисунке 18 показан фрагмент таблицы стилей для оформления заголовка стартовой страницы.

В центре стартовой страницы размещены основные блоки курсовой работы. Справа блок задания к работе, в ценре - ссылка непосредственно на сайт библиотеки, а справа находится ссылка на пояснительную записку к работе. Структура написания данных блоков подразумевает разбивку поля страницы на строки класса row  и колонки класс col и при изменении параметров открытия окна сайта будет происходить смещение данных блоков согласно сетке, заданной величиной ее ячейки. Задаются также граничные значения высоты, ширины, отступов, толщин линий наряду с параметрами шрифтов и фоновых элементов.

Внутри каждой такой ячейки структура кода одинакова (см.рис.19)


<div class="row">                                                                   <!-- начало строки с работами -->

<div class="col">                                                                 <!-- блок 1й работы - задание -->

              <div class="middle-item">                                     <!-- название работы -->

                       <div class="middle_title">

                                 <i class="fa fa-spinner" aria-hidden="true">

                                 </i>

                                 <a href="lib/doc/Titul_kurs_RevaAD.htm"><span class="letter">M</span>ое/a>

                       </div>                                                                                              

                       <div class="middle_img">                              <!-- рисунок работы -->

                       <img src="lib/visual_pic/titul.png" alt="Титульный лист" title="Мое задание">

                       </div>                                                                                                   

                       <div class="middle_coment">                       <!-- описание работы -->

                       <p>Титульный лист курсовой работы по ГОСТу</p>

            </div>

         </div> <!-- / ячейки сетки middle-item -->

    </div> <!-- /col 1го блока работы -->

 

Рис.19  Фрагмент html-файла – ячейка блока работі стартовой страницы

 

В строке описан класс ="fa fa-spinner" – это значек-символ из подключенного штрифта для иконок из bootstrapcdn. Далее импользуя класс letter в строке ссылки для заглавной буквы «М» оформляем переход с измененем стандартных параметров отображения ссылок при фокусе, чтобы выдержать цветовую гамму и стиль страницы. Далее идет картинка, параметры которой описаны в классе middle_img. Она имеет граничные значения размеров, отступов и при попадании в фокус (используя псевдо-класс img:hover {transition: 0.5s; transform: scale(1.2, 1.2); } размер картинки увеличивается на 20% с задержкой в пол-секунды, а при потере фокуса возвращается к исходным размерам. Аналогичный прием используется и на основной странице сайта при наведении фокуса на картинку обложки книги.

Далее идет подпись блока или краткое содержание ячейки, параметры которой указаны в классе middle_coment. На этом блок, ограниченный классом col в строке row заканчивается. На моей странице аналогичніх ячеек три.

Внизу стартовой страницы расположен подвал или footer, віделеній цвітом и закрепленный строго внизу. Он использован для размещения знаков соцсетей и моей индивидуальной подписи (аналог торгового знака – см.рис.20).


<div class="footer">

<div class="container1">

   <div class="but_soc">                         <!-- блок иконок --> …   

           <a href="mailto:artem.reva.2016@gmail.com" target="_blank">

           <img src="lib/pic/buttom_kniga/icons_mail.png" alt="e" title="моя почта"></a>

  </div>

  <div id="vk_contact_us"> </div>

   

   <div class="col">                               <!-- блок моей подписи сайта --> …

      <div class="letR"><span class="letterR">R</span>eva</div>

<div class="letV"><span class="letterV">A</span>_rtem ©&nbsp;12.2018</div>

</div> <!-- /footer -->                                               <

 

Рис.20. Фрагмент «подвала» страницы с иллюстрацией описанного

 

На главной странице сайта библиотеки (см.рис.21) вверху страницы размещается меню, содержащее такие пункты как:

-по жанрам- ссылка на вторую страницу сайта, где изначальная сортировка осуществляется по жанру книги (см.рис.15);

-по авторам и далее по сгруппированным инициалам заглавных букв фамилии автора и группировка и сортировка книг осуществлена по автору(см.рис.14) и имеет ниспадающие вложенные перечни авторов, удовлетворяющих заданным условиям. Перечень фамилий берется из базы данных согласно прописанному запросу, текст программного кода на php приведен в приложении 2 и 3.

 

Рис.21 Фрагмент меню главной страницы сайта библиотеки

Слева вверху показано название (значение)сайта и оформлено в виде книжной полки, уходящей вниз.В футере,жестко при крепленном в нижнем углу экрана также хранится личная подпись автора (см.рис.22). Каждая отсортированная группа книг – будь-то по автору, будь-то по жанру отображается на странице в виде блока, обведеного рамкой.

Рис.22 Личная подпись в «подвале» сайта библиотеки

 

Каждая книга занимает в экранной области строго ограниченный размер «ячейки» сетки экрана, описанный в таблице стилей так же, как и на стартовой странице. При изменении размеров экрана – количество аналогичных блоков меняется от четырех до одного (см.рис.23).

При нажатии на обложку книги появляется окно с аннотацией, которое имеет визуальный эффект появления в левом углу экрана и перемещения окна в центр экрана поверх ранее отображенной страницы. В этом окне содержится вся подробная информация о книге – автор, серия, жанр, аннотация. Имеются ссылки на текст книги и фрагмент mp3файла, оформленные в виде псевдо-кнопок с изображением книги и наушников (см.рис.16).

 

Рис.23 Изменение отображения сайта с уменьшением размера окна

 

При оформлении текста книг, относящихся к моей библиотеке также было произведено преобразование текста в html код и его последующее форматирование в едином оформительском стиле (см.рис.17).

Рис. 24 Отображение книги из моей библиотеки и ее html-код

 

В начале текста книги указана ссылка на css-файл и прописано меню книг в виде списка глав. Для перехода используются ссылки на главы кгини и метки(см.рис.24). Для описания стилей в книгах сформирована таблица стилей непосредственно для них. Файл ../css/style_menu_book.css содержит описания всех клас сов и стилей таких книг. Отдельные стили имеют заголовки, цитаты, жанр, автор, текс параграфов, наименования книги, пункты меню. Текст таблицы стилей приведен в приложении 4.

 

 


Заключение


Список литературы


Приложение 1. Текст стартовой страницы курсового проекта index.html

<!DOCTYPE html>

<html>

<head>

<title>A_Reva_1</title>

        <meta name="keywords" content="" />

        <meta name="description" content="" />

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

                                                           <!-- Подключение нормализованной таблицы стилей -->

        <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

                                               <!-- Подключение штрифтов из Google fonts-->

        <link href="https://fonts.googleapis.com/css?family=Marck+Script|Neucha|Pacifico" rel="stylesheet">

<!-- Подключение штрифтов для иконок из bootstrapcdn-->

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

                                                            <!-- Подключение своей таблицы стилей -->

   <link rel="stylesheet" type="text/css" href="lib/css/style_b.css">

                                                       <!-- загрузка иконки в титуле веб-страницы -->

    <link rel="shortcut icon" type="image/x-icon" href="lib/pic/AR.png">

</head>

<body>                                                                             <!-- ============ Заголовок страницы ========== -->

<div id="headerMain">

<header class="header">

   <div class="header_title">Reva Artem </div>

   <p class="punkt_title">&copy;12.2018 курсовое задание - разработка сайта библиотеки (html5, css3, php, MySQL) </p>

</header>

</div>                                                                               <!-- =====Середина страницы ================== -->

 <div class="middle">

<main class="content">

  <section>

  <div class="container">

      <div class="row">                                                           <!-- начало 1й строки с работами -->

         <div class="col">                                                      <!-- блок 1й работы - задание -->

           <div class="middle-item">                                               <!-- название работы -->

               <div class="middle_title"><i class="fa fa-spinner" aria-hidden="true"></i>

                        <a href="lib/doc/Titul_kurs_RevaAD.htm"><span class="letter">M</span>ое задание </a></div>

            <!-- рисунок работы -->

               <div class="middle_img"><img src="lib/visual_pic/titul.png" alt="Титульный лист" title="Мое задание">  

                                                                                                         </div><!-- описание работы -->

               <div class="middle_coment">

               <p>Титульный лист курсовой работы по ГОСТу</p> </div>

           </div>                                  <!-- / ячейки сетки middle-item -->

        </div>                               <!-- /col 1го блока работы -->

 

       <div class="col">                                                               <!-- блок 2й работы - библиотека -->

            <div class="middle-item">                                        <!-- название работы -->

            <div class="middle_title"><i class="fa fa-spinner" aria-hidden="true"></i>

            <a href="index_ar_biblio_autor_letter_win_fixed.php" title="библиотека, файл по авторам и наименованиям книг"><span class="letter">M</span>оя библиотека </a></div>    <!-- описание работы -->

            <div class="middle_coment">                                          <!-- рисунок работы -->

            <div class="middle_img"> <img src="lib/pic/_kniga.png" alt="Моя библиотека" title="Мои отформатированные книжечки и образцы звуковых файликов к ним, если есть"> </div>

            <p> Можно почитать любимых авторов и даже послушать пример звучания аудио-версии </p>

                </div>

           </div>                               <!-- / ячейки сетки middle-item -->

       </div>                                  <!-- /col 2го блока работы -->

 

        <div class="col">                                <!-- блок 3й работы -текст работы -->

           <div class="middle-item">

               <div class="middle_title"> <i class="fa fa-spinner" aria-hidden="true"></i><a href="lib/doc/_kurs_RevaAD.doc"><span class="letter">M</span>оё описание сайта </a></div>

              <div class="middle_img"><img src="lib/visual_pic/tekst.jpg" alt="Tекст+" title="текстовая часть курсовой работы: пояснения, картинки "> </div>

               <div class="middle_coment">

               <p>Текстовая часть курсовой работы, содержащая описание сайка, картинки и тексты программы</p></div>

            </div> <!-- / ячейки сетки middle-item -->

        </div> <!-- /col 3го блока работы -->

 

</div> <!-- /row -->       

</div> <!-- /container-->

</section> <!-- /секция работ с картинками и ссылками -->

</main><!-- .content заполнение страницы -->

</div><!-- .middle серединная часть страницы-->                                  <!-- ======== FOOTER страницы ====-->

<div class="footer">

<div class="container1">

   <div class="but_soc">                             <!-- блок иконок -->

      <a href="https://vk.com/share.php?url=https://#" target="_blank" alt="VK" ><img src="lib/pic/buttom_kniga/icons_vk.png" alt="VK" title="my url для 'поделиться в Контакте'"></a>

                                                      <a href="https://www.facebook.com/" target="_blank" alt="FaceBook" ><img src="lib/pic/buttom_kniga/icons_f.png" alt="f" title="моя страница на Фэйсбуке"></a>

  <a href="https://plus.google.com/share?url=http%3A%2F%2Fwww.cyberforum.ru%2Fhtml%2Fthread352443.html& amp;utm_source= share2" rel="nofollow noopener" target="_blank" title="Google+"><img src="lib/pic/buttom_kniga/icons_g.png" alt="g+" title="моя страница в google+"></a>

  <a href="mailto:artem.reva.2016@gmail.com" target="_blank"><img src="lib/pic/buttom_kniga/icons_mail.png" alt="e" title="моя почта"></a>

  </div>

                                                      <div id="vk_contact_us"> </div>

          <div class="col">   

      <div class="letR"><span class="letterR">R</span>eva</div>

   <div class="letV"><span class="letterV">A</span>_rtem ©&nbsp;12.2018</div>

   </div> <!-- /col -->

      </div> <!-- /container -->

</div> <!-- /footer -->

    

</body>

</html>


Приложение 2 . Текст программ главной сраницы библиотеки index_ar_biblio_autor_letter_win_fixed.php с сортировкой в меню по инициалам авторов

<?php                                                                                                              // Соединиться с сервером БД

$mysqli = new mysqli("localhost", "ar", "parol", "_kursovoi");                // проверка соединения

if ($mysqli->connect_errno) {

printf("Не удалось подключиться: %s\n", $mysqli->connect_error);

exit();

}                                                                                                             // задаем кодировку отобрпжения русского шрифта

mysqli_query ($mysqli, "SET NAMES utf8");

?>                                                           

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Библ_по_авторам</title>

      <meta name="keywords" content="" />

        <meta name="description" content="" />

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

                                                                                                    <!-- Подключение нормализованной таблицы стилей -->

        <link rel="stylesheet" type="text/css" href="lib/css/reset.css">

                                                                                                    <!-- Подключение штрифтов из Google fonts-->

        <link href="https://fonts.googleapis.com/css?family=Marck+Script|Neucha|Pacifico" rel="stylesheet">

                                                                                                         <!-- Подключение штрифтов для иконок из bootstrapcdn-->

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

                                                                                                    <!-- Подключение библиотеки JQuery-->

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>

                                                                                                       <!-- Подключение своей таблицы стилей -->

<link rel="stylesheet" type="text/css" href="lib/css/style.css">

                                                                                                        <!-- загрузка иконки в титуле веб-страницы -->

<link rel="shortcut icon" type="image/x-icon" href="lib/pic/AR.png">

<script>                                                                                            <!—скрипт для вызова аннотации к каждой книге -->

        <?php                                                                                                            // Цикл по book.id_b -массиву книг

        echo "$(document).ready(function(){\n";

        echo "$(\"div.b-popup\").hide();\n";

        echo "});\n";

        $bookSQL = "SELECT id_b from book ORDER BY id_b" ;

        $rs_book = mysqli_query($mysqli, $bookSQL);

        while($row_b = mysqli_fetch_array($rs_book, MYSQL_ASSOC)) {

        $book_id = $row_b['id_b'];               // ключ книги - уникальный id

                                                                    //Функции отображения PopUp и скрытия PopUp для каждой книги с id

      echo "function PopUpShow_" .$book_id. "(){ $(\"#b_" .$book_id. "\").show(600); }\n";

        echo "function PopUpHide_" .$book_id. "(){ $(\"#b_" .$book_id. "\").hide(600); }\n";    

        }

        ?>

</script>

 

</head>                                                                           <!-- ============ начало основного блока ====-->

<body>

 <div class="fon_galery">                                                <!-- Блок строкового меню-ленты с выпадающим списком жанров-->

<div class="menu_back">

  <header class="header">

  <div class='menu'>

       <div class='menu1'>

           <ul>

               <li><a href='index_ar_biblio_janr_win_fixed.php'><span>По жанрам &uarr;</span></a></li>

               <li><a href='#'><span>Авторы -></span></a></li>

               <li><a href='#'><span> А-И &darr;</span></a>

               <ul class="menu3">

<?php

                                                                                                   // Цикл по $l_Name -массиву авторов книг

        $autorSQL = "SELECT DISTINCT book.id_a, autors_book.l_Name, autors_book.f_Name FROM book JOIN autors_book ON book.id_a = autors_book.id_a ORDER BY l_Name" ;

        $rs_autor = mysqli_query($mysqli, $autorSQL);

        while($row_a = mysqli_fetch_array($rs_autor, MYSQL_ASSOC)) {

 

                                                           $a_id = $row_a['id_a']; // связанный ключ автор книги id

                                                           $a_f_name = $row_a['f_Name']; //автор - имя

                                                           $a_l_name = $row_a['l_Name']; //автор - фамилия

//                                                        $strName_book = $row_a['name_book']; // Название книги

                                                           $lName_first_letter = mb_substr($a_l_name,0,1); // вырезаем 1й символ для исп.span

 

if ((strcmp($lName_first_letter,"А")==0) || (strcmp($lName_first_letter,"Б")==0) || (strcmp($lName_first_letter,"В")==0) || (strcmp($lName_first_letter,"Г")==0) || (strcmp($lName_first_letter,"Д")==0) || (strcmp($lName_first_letter,"Е")==0) || (strcmp($lName_first_letter,"Ж")==0) || (strcmp($lName_first_letter,"З")==0) || (strcmp($lName_first_letter,"И")==0) ){

        echo "<li><a href='#a_" . $a_id . "'><span>" . $a_l_name . " " . $a_f_name . "</span></a></li>\n";

        }

}

?>                                                                     <!--МЕНЮ -->

               </ul></li>

               <li><a href='#'><span>&darr; К-О &darr;</span></a>

               <ul class="menu4">

        <?php                                                                             // Цикл по $l_Name -массиву авторов книг

        $autorSQL = "SELECT DISTINCT book.id_a, autors_book.l_Name, autors_book.f_Name FROM book JOIN autors_book ON book.id_a = autors_book.id_a ORDER BY l_Name" ;

        $rs_autor = mysqli_query($mysqli, $autorSQL);

        while($row_a = mysqli_fetch_array($rs_autor, MYSQL_ASSOC)) {

 

                                                           $a_id = $row_a['id_a']; // связанный ключ автор книги id

                                                           $a_f_name = $row_a['f_Name']; //автор - имя

                                                           $a_l_name = $row_a['l_Name']; //автор - фамилия

                                                           $lName_first_letter = mb_substr($a_l_name,0,1); // вырезаем 1й символ для исп.span

 

                                                                                         if ((strcmp($lName_first_letter,"К")==0) || (strcmp($lName_first_letter,"Л")==0) || (strcmp($lName_first_letter,"М")==0) || (strcmp($lName_first_letter,"Н")==0) || (strcmp($lName_first_letter,"О")==0) ){

                                                           echo "<li><a href='#a_" . $a_id . "'><span>" . $a_l_name . " " . $a_f_name . "</span></a></li>\n";

                                                           }

        }

        ?>

               </ul>

               </li>                     

               <li><a href='#'><span>&darr; П-Я &darr;</span></a>

               <ul class="menu5">

        <?php                                                                                        // Цикл по $l_Name -массиву авторов книг

        $autorSQL = "SELECT DISTINCT book.id_a, autors_book.l_Name, autors_book.f_Name FROM book JOIN autors_book ON book.id_a = autors_book.id_a ORDER BY l_Name" ;

        $rs_autor = mysqli_query($mysqli, $autorSQL);

        while($row_a = mysqli_fetch_array($rs_autor, MYSQL_ASSOC)) {

 

                                                           $a_id = $row_a['id_a']; // связанный ключ автор книги id

                                                           $a_f_name = $row_a['f_Name']; //автор - имя

                                                           $a_l_name = $row_a['l_Name']; //автор - фамилия

                                                           $lName_first_letter = mb_substr($a_l_name,0,1); // вырезаем 1й символ для исп.span

 

                                                           if ((strcmp($lName_first_letter,"П")==0) || (strcmp($lName_first_letter,"Р")==0) ||                   (strcmp($lName_first_letter,"С")==0) || (strcmp($lName_first_letter,"Т")==0) || (strcmp($lName_first_letter,"У")==0) || (strcmp($lName_first_letter,"Ф")==0) || (strcmp($lName_first_letter,"Х")==0) || (strcmp($lName_first_letter,"Ц")==0) || (strcmp($lName_first_letter,"Э")==0)){

                                                           echo "<li><a href='#a_" . $a_id . "'><span>" . $a_l_name . " " . $a_f_name . "</span></a></li>\n";

                                                           }

        }

        ?>

               </ul>

               </li>

               <li><a href='index_start.html'><span>Рабочие файлы &uarr;</span></a></li>

               <li><a href='index.html'><span>На стартовую страницу &uarr;</span></a></li>

           </ul>

 

       </div>                                     <!--/menu1 -->

   </div> <!--/menu -->

   </header>

         </div>                                                                                                           <!-- Блок Библиотеки - основной -->

     <div class="fon_biblio">БИБЛИОТЕКА </div> <!-- /fon_biblio -->

<!-- Блок одного жанра из списка -->

    <div class="galery">

             <div class="centr_janr">

         <div class="janr_book" >                                                                <!-- начало общего жанра книг ФЭНТЕЗИ   -->

                            <p class="foto_janr"></p>

<div class="janr_f">Жанр книг: <span class="letter1_3">Ф</span> &nbsp;&nbsp;<span class="letter3">энтези</span></div>

         </div>                                                                                           <!-- / janr_book-->

<?php                                                                                                       // Цикл по $l_Name -массиву авторов книг

        $autorSQL = "SELECT DISTINCT book.id_a, autors_book.l_Name, autors_book.f_Name FROM book JOIN autors_book ON book.id_a = autors_book.id_a ORDER BY l_Name" ;

        $rs_au = mysqli_query($mysqli, $autorSQL);

        while($row_au = mysqli_fetch_array($rs_au, MYSQL_ASSOC)) {

 

                                 $au_id = $row_au['id_a']; // связанный ключ автор книги id

                                 $au_f_name = $row_au['f_Name']; //автор -имя автора книги

                                          $fName_first_letter = mb_substr($au_f_name,0,1); // вырезаем 1й символ для исп.span

                                          $fName_sec = mb_substr($au_f_name,1);    // выводим остаток строки со 2го символа до конца   

                                 $au_l_name = $row_au['l_Name']; //автор - фамилия

                                          $lName_first_letter = mb_substr($au_l_name,0,1); // вырезаем 1й символ для исп.span

                                          $lName_sec = mb_substr($au_l_name,1);     // выводим остаток строки со 2го символа до конца   

?>

                                 <div class="centr">

                                                                         <div class="janr_name">

                                                                         <a name="a_<?php echo $au_id; ?>" class="down_row_janr"></a>

                                                          <span class="letter"><?php echo $lName_first_letter; ?></span><?php echo $lName_sec ; ?>

                                                          <span class='letter'> <?php echo $fName_first_letter; ?></span><?php echo $fName_sec; ?>

                                                          </div>

                                                          <hr>

                           <!-- Перечень книг одного жанра в рамке -->

                                                          <div class="janr_row">

                                                          <ul>

        <?php                                     // SQL-запрос список книг одного выбранного автора

                                                                         $strSQL = "SELECT book.*, autors_book.*, seria_book.*, janr_book.* FROM book

                                                                         INNER JOIN autors_book ON book.id_a = autors_book.id_a

                                                                         INNER JOIN seria_book ON book.id_s = seria_book.id_s

                                                                         INNER JOIN janr_book ON book.id_j = janr_book.id_j WHERE autors_book.id_a = " . $au_id    ;

 

                                                                         $rs = mysqli_query($mysqli, $strSQL);

 

                    // Цикл по $rs -массиву ассоциативного типа - т.е. содерж.имена столбцов, а не номера

                    while($row = mysqli_fetch_array($rs, MYSQL_ASSOC)) {

                        

                    $strID_book = $row['id_b'] ;                                             //код книги

                $strIaut = $row['f_Name'];                                                   // имя автора

                    $faut_f = mb_substr($strIaut,0,1);                                     // первая буква имени автора (инициал)

                    $faut_sec = mb_substr($strIaut,1);                                  // выводим остаток строки со 2го символа до конца

                    $strLaut = $row['l_Name'];                                                   // фамилия автора

                    $lastName_first_letter = mb_substr($strLaut,0,1); // вырезаем 1й символ для исп.span

                    $lastName_sec = mb_substr($strLaut,1);                           // выводим остаток строки со 2го символа    

                    $strName_book = $row['name_book'];                               // Название книги

                    $strPR = $row['prizn_s'] ;                                                      // признак серии - если 1 -книга в серии, если NULL - без серии-одиночка

                    $strNs = $row['ns'] ;                                                              // номер книги в серии или 1 - если вне серии

                    $strPic = $row['pic_book'];                                        // адрес обложки книги lib/pic/3x4book(200)/#.png      

                    $strSeria = $row['seria'];                                                      // название серии книг      

                    $strAnnotat = $row['annotat'];                                        // текст аннотации к книге

                    $strText = $row['file_book'];                                       // адрес файла с текстом книги lib/books/#.html         

                    $strZvuk = $row['sound_treck_b'];                                   // адрес отрывка звуковой книги lib/media/#.mp3

                    $janr = $row['Janr'];                                                               //жанр книги

                              $janr_first_letter = mb_substr($janr,0,1); // вырезаем 1й символ для исп.span

                              $janr_sec = mb_substr($janr,1);                                  // выводим остаток строки со 2го символа до конца

                    $strSlovo = $row['kluch_slovo'] ;            // ключевые слова, разделенные ","              

?>              

                              <li><div class="fig">

                                              

<?php                                                                                            

                              echo "<p class=\"fio\">" . $janr . "</p>\n";

                              echo "<p class=\"nam\">" . $strName_book . "</p>\n";

?>

        <a href="javascript:PopUpShow_<?php echo $strID_book; ?>()" alt="открыть" title="при нажатии - откроется аннотация к книге"> <p><img src="<?php echo $strPic; ?>"></p></a>

        <div class="b-popup" id="b_<?php echo $strID_book; ?>">

   <div class="b-popup-content">

       <div class="book_ff">

       <p class="seria"><?php echo $strName_book; ?></p>

                                                           <div class="col_bot_mini">

           <a href="<?php echo $strText; ?>" class="bot_ch" alt="читать" title="при нажатии откроется .html-файл с текстом книги с моем оформлении"></a>

           <button class="bot_sl" OnClick="myPlay('<?php echo $strZvuk; ?>')" title="слушать фрагмент; - повторно нажать:стоп"></button>

       </div><!-- кнопки файлы html и если есть-mp3-->

                 <p class="book_t">Серия:</p>

       <div class="book_an">

        <?php

                           if ($strPR == NULL){         echo "вне серии <br>"; }    

                           else {                                 echo $strSeria . " <br>";}

        ?>

        </div>

                 <p class="book_t">&alefsym; книги в серии:</p>

                 <div class="book_an">

        <?php

                           if ($strPR == NULL){         echo " - "; }           

                           else {                                 echo $strNs . "<br>";}

        ?>

                 </div>

                           <p class="book_s">Жанр книги:</p>

                           <p class="book_an"><?php echo $janr; ?></p>

                           <p class="book_t">Аннотация к книге:</p>

                           <p class="book_an"><?php echo $strAnnotat; "\n"; ?></p>

                           <p class="book_t">Ключевые слова к книге:</p>

                           <p class="book_an"><?php echo $strSlovo; ?></p>

                 </div>                                    <!-- /book_ff конец аннотации -->

                 <p class="book_an_return">

                 <a href="javascript:PopUpHide_<?php echo $strID_book; ?>()">Закрыть</a></p>

                  </div>                                                                                      <!-- /b-popup-content -->

        </div>                                                                                             <!-- /b-popup - конец книги -->

        </div>

        <?php                                                                                                      

                              if ($strPR == NULL){echo "<p class=\"ser\">(без серии)</p>\n"; }             

                              else {                                             echo "<p class=\"ser\">" . $strSeria . "-" . $strNs . "</p>\n";}

                              echo "</li>";

        }

        ?>                 

                          </ul>

             </div> <!-- / janr_row-->

    </div>      <!-- / centr -->

                  

<?php

        }                                             

$rs->close();                                                 // очищаем результирующий набор

        mysqli_close($mysqli);                       // Закрыть соединение с БД

?>

        </div>  <!-- / centr_janr-->

        </div>     <!-- / galery-->

<footer class="footer_biblio">                        // Подвал сайта – с єлектронной подписью автора

<div class="letR"><span class="letterR">R</span>eva&nbsp;&nbsp; </div>

<div class="letV"><span class="letterV"> _A</span>_rtem&nbsp;© 12.2018</div>

</footer>

 </div> <!-- / fon_galery-->

</body>

</html>

 

 


Приложение 3 . Текст программ второй сраницы библиотеки index_ar_biblio_janr_win_fixed.php с сортировкой в меню по жанру

<?php                                                                                                              // Соединиться с сервером БД

$mysqli = new mysqli("localhost", "ar", "parol", "_kursovoi");                // проверка соединения

if ($mysqli->connect_errno) {

printf("Не удалось подключиться: %s\n", $mysqli->connect_error);

exit();

}                                                                                                             // задаем кодировку отобрпжения русского шрифта

mysqli_query ($mysqli, "SET NAMES utf8");

?>                                                           

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Библ_по_авторам</title>

      <meta name="keywords" content="" />

        <meta name="description" content="" />

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

                                                                                                         <!-- Подключение нормализованной таблицы стилей -->

        <link rel="stylesheet" type="text/css" href="lib/css/reset.css">

                                                                                                         <!-- Подключение штрифтов из Google fonts-->

        <link href="https://fonts.googleapis.com/css?family=Marck+Script|Neucha|Pacifico" rel="stylesheet">

                                                                                                         <!-- Подключение штрифтов для иконок из bootstrapcdn-->

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

                                                                                                         <!-- Подключение библиотеки JQuery-->

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>

                                                                                                       <!-- Подключение своей таблицы стилей -->

<link rel="stylesheet" type="text/css" href="lib/css/style.css">

                                                                                                        <!-- загрузка иконки в титуле веб-страницы -->

<link rel="shortcut icon" type="image/x-icon" href="lib/pic/AR.png">

<script>                                                                                            <!—скрипт для вызова аннотации к каждой книге -->

        <?php                                                                                                            // Цикл по book.id_b -массиву книг

        echo "$(document).ready(function(){\n";

        echo "$(\"div.b-popup\").hide();\n";

        echo "});\n";

        $bookSQL = "SELECT id_b from book ORDER BY id_b" ;

        $rs_book = mysqli_query($mysqli, $bookSQL);

        while($row_b = mysqli_fetch_array($rs_book, MYSQL_ASSOC)) {

        $book_id = $row_b['id_b'];               // ключ книги - уникальный id

                                                                         //Функции отображения PopUp и скрытия PopUp для каждой книги с id

      echo "function PopUpShow_" .$book_id. "(){ $(\"#b_" .$book_id. "\").show(600); }\n";

        echo "function PopUpHide_" .$book_id. "(){ $(\"#b_" .$book_id. "\").hide(600); }\n";    

        }

        ?>

</script>

 

</head>                                                                           <!-- ============ начало основного блока ====-->

<body>

<div class="fon_galery">                                                 <!-- Блок строкового меню-ленты с выпадающим списком жанров-->

<div class="menu_back">

  <header class="header">

  <div class='menu'>

       <div class='menu1'>

           <ul>

               <li><a href='#'><span>&darr; По жанрам &darr;</span></a>

               <ul class="menu2">

        <?php                                                                                             // Цикл по $janr -массиву жанров книг

        $janrSQL = "SELECT DISTINCT book.id_j, janr_book.Janr FROM book JOIN janr_book ON book.id_j = janr_book.id_j ORDER BY Janr" ;

        $rs_janr = mysqli_query($mysqli, $janrSQL);

        while($row_j = mysqli_fetch_array($rs_janr, MYSQL_ASSOC)) {

                                                           $j_id = $row_j['id_j'];                   // связанный ключ жанр id

                                                           $j_name = $row_j['Janr'];              //жанр книги

                                                           echo "<li><a href='#j_" . $j_id . "'><span>" . $j_name ."</span></a></li>\n";

        }

        ?>

               </ul>

               </li>

               <li><a href='index_ar_biblio_autor_letter_win_fixed.php'><span>по авторам &uarr;</span></a></li>

                   

               <li><a href='index_start.html'><span>Рабочие файлы &uarr;</span></a></li>

               <li><a href='index.html'><span>На стартовую страницу &uarr;</span></a></li>

           </ul>

 

       </div>

   </div>  <!--/menu-->

   </header>

         </div>                                                           <!-- Блок Библиотеки - основной -->

     <div class="fon_biblio">БИБЛИОТЕКА 

</div> <!-- /fon_biblio --> <!-- Блок одного жанра из списка -->

    <div class="galery">

             <div class="centr_janr">

         <div class="janr_book" >                                   <!-- начало общего жанра книг ФЭНТЕЗИ   -->

                                 <p class="foto_janr"></p>

                                 <div class="janr_f">Жанр книг: <span class="letter1_3">Ф</span> &nbsp;&nbsp;<span class="letter3">энтези</span></div>

         </div> <!-- / janr_book-->

<?php                                                                             // Цикл по $janr -массиву жанров книг

        $janrSQL = "SELECT DISTINCT book.id_j, janr_book.Janr FROM book JOIN janr_book ON book.id_j = janr_book.id_j " ;

        $rs_janr = mysqli_query($mysqli, $janrSQL);

        while($row_j = mysqli_fetch_array($rs_janr, MYSQL_ASSOC)) {

                       $janr_id = $row_j['id_j'];                    // связанный ключ жанр id

                       $janr = $row_j['Janr'];                        //жанр книги

                       $janr_first_letter = mb_substr($janr,0,1);         // вырезаем 1й символ для исп.span

                       $janr_sec = mb_substr($janr,1);                        // выводим остаток строки со 2го символа до конца

?>

        <div class="centr">

        <div class="janr_name"><a name="j_<?php echo $janr_id; ?>" class="down_row_janr"></a>

        <span class="letter"><?php echo $janr_first_letter; ?></span><?php echo $janr_sec; ?> </div>

        <hr>                                                                     <!-- Перечень книг одного жанра в рамке -->

        <div class="janr_row">

                <ul>

        <?php                                     // SQL-запрос список книг одного выбранного жанра

                 $strSQL = "SELECT book.*, autors_book.*, seria_book.*, janr_book.* FROM book

                 INNER JOIN autors_book ON book.id_a = autors_book.id_a

                 INNER JOIN seria_book ON book.id_s = seria_book.id_s

                 INNER JOIN janr_book ON book.id_j = janr_book.id_j WHERE janr_book.id_j = " . $janr_id ;

 

                 $rs = mysqli_query($mysqli, $strSQL);

 

                 // Цикл по $rs -массиву ассоциативного типа - т.е. содерж.имена столбцов, а не номера

                 while($row = mysqli_fetch_array($rs, MYSQL_ASSOC)) {

                 $strI = $row['fn'];                                      // первая буква фамилии автора (нглийский инициал ФИО для отбора)

                     

                 $strID_book = $row['id_b'] ;                      //                       код книги

                 $strfaut = $row['f_Name'] ;                                     // имя автора      

                              $faut_first_letter = mb_substr($strfaut,0,1); // вырезаем 1й символ для исп.span

                              $faut_sec = mb_substr($strfaut,1);            // выводим остаток строки со 2го символа до конца

                 $strLaut = $row['l_Name'];                                  // фамилия автора

                              $lastName_first_letter = mb_substr($strLaut,0,1); // вырезаем 1й символ для исп.span

                              $lastName_sec = mb_substr($strLaut,1);   // выводим остаток строки со 2го символа до конца   

                                  

                 $strName_book = $row['name_book'];   // Название книги

                 $strPR = $row['prizn_s'] ;                     // признак серии

                 $strNs = $row['ns'] ;                                  // номер книги в серии или 1 - если вне серии

                 $strPic = $row['pic_book'];                      // адрес обложки книги lib/pic/3x4book(200)/#.png      

                 $strSeria = $row['seria'];                          // название серии книг      

                 $strAnnotat = $row['annotat'];                 // текст аннотации к книге

                 $strText = $row['file_book'];                     // адрес файла с текстом книги lib/books/#.html         

                 $strZvuk = $row['sound_treck_b'];            // адрес отрывка звуковой книги lib/media/#.mp3

                 $janr = $row['Janr'];                                 //жанр книги

                              $janr_first_letter = mb_substr($janr,0,1); // вырезаем 1й символ для исп.span

                              $janr_sec = mb_substr($janr,1);  // выводим остаток строки со 2го символа до конца

                 $strSlovo = $row['kluch_slovo'] ;            // ключевые слова, разделенные ","               

?>           

                              <li><div class="fig">

                                           

<?php                                                                                            

                 echo "<p class=\"fio\">" . $faut_first_letter. "." . $strLaut . "</p>\n";

                 echo "<p class=\"nam\">" . $strName_book . "</p>\n";

                     

        ?>

                 <a href="javascript:PopUpShow_<?php echo $strID_book; ?>()" alt="открыть" title="при нажатии - откроется аннотация к книге"> <p><img src="<?php echo $strPic; ?>"></p></a>

        <div class="b-popup" id="b_

<?php echo $strID_book; ?>">

   <div class="b-popup-content">

       <div class="book_ff">

       <p class="seria"><?php echo $strName_book; ?></p>

                 <div class="col_bot_mini">

           <a href="<?php echo $strText; ?>" class="bot_ch" alt="читать" title="при нажатии откроется .html-файл с текстом книги с моем оформлении"></a>

           <button class="bot_sl" OnClick="myPlay('<?php echo $strZvuk; ?>')" title="слушать фрагмент; - повторно нажать:стоп"></button>

       </div><!-- кнопки файлы html и если есть-mp3-->

                              <p class="book_t">Серия:</p>

       <div class="book_an">

                 <?php

                                       if ($strPR == NULL){ echo "вне серии <br>"; }    

                                       else {                                                                   echo $strSeria . " <br>";}

                 ?>

                 </div>

                              <p class="book_t">&alefsym; книги в серии:</p>

                              <div class="book_an">

                 <?php

                                       if ($strPR == NULL){ echo " - "; }           

                                       else {                                                                   echo $strNs . "<br>";}

                 ?>

                              </div>

                                       <p class="book_s">Жанр книги:</p>

                                       <p class="book_an"><?php echo $janr; ?></p>

                                       <p class="book_t">Аннотация к книге:</p>

                                       <p class="book_an"><?php echo $strAnnotat; "\n"; ?></p>

                                       <p class="book_t">Ключевые слова к книге:</p>

                                       <p class="book_an"><?php echo $strSlovo; ?></p>

 

                              </div>   <!-- /book_ff конец аннотации -->

                              <p class="book_an_return">

                         <a href="javascript:PopUpHide_<?php echo $strID_book; ?>()">Закрыть</a></p>

                  </div> <!-- /b-popup-content -->

        </div>       <!-- /b-popup - конец книги -->

 </div>

<?php                                                                                               

                 if ($strPR == NULL){echo "<p class=\"ser\">(без серии)</p>\n"; }          

                 else {   

                 echo "<p class=\"ser\">" . $strSeria . "-" . $strNs . "</p>\n";}

?>

                                       </li>

        <?php                                                                                                      

          }

        ?>                 

                                        </ul>

             </div> <!-- / janr_row-->

    </div>      <!-- / centr -->

                  

<?php

        }                                        

$rs->close();                                   // очищаем результирующий набор

        mysqli_close($mysqli);                       // Закрыть соединение с БД

?>

        </div>  <!-- / centr_janr-->

        </div>     <!-- / galery-->

<footer class="footer_biblio">                        // Подвал сайта – с єлектронной подписью автора

<div class="letR"><span class="letterR">R</span>eva&nbsp;&nbsp; </div>

<div class="letV"><span class="letterV"> _A</span>_rtem&nbsp;© 12.2018</div>

</footer>

 </div>

</body>

</html>

 


Приложение 4 . Текст таблицы стилей для форматирования текста книгииз моей библиотеки

 /* ============================ верхнее раскрывающееся меню =========================================== */

#navbar, #navbar ul {

font-size: 0.85rem !important;

margin: 0;

padding: 0; /*Убираем у обоих списков отступы и маркеры*/

list-style-type: none; /*убираем маркеры */

height: 19px;

color: #2a0505;

font-family: "Neucha", cursive;

transition: 0.5s all;

   } /*убираем отступы,маркер и задаем шрифт, цвет меню */

#navbar {

width: auto;

position: fixed;

top: 0px; /* Положение от верхнего края */

left: 10px; /* Положение от левого края */

text-align: center;

text-decoration:none;

} /*фиксируем в углу 1ю колонку меню и задаем ограничение размера */

#navbar li {

float: left; /* если в строке меню пунктов >1, то идут вправо в строку */

padding-left: 0;

width: auto;

height: 100%;

position: relative;

#navbar ul li { float: none; }                                 /* у пункта меню нет огибания текстом */

#navbar ul {

display: none;

position: absolute;

top: 100%;  }                         

#navbar li:hover ul { display: block;} /* показываем выпадение списка с пунктами меню при наведении мыши */

#navbar li a /*, ul.nav2 li a*/ {

display: block;

text-align: left;

text-indent: 0;

padding: 1px 10px;

width: auto;

color: wheat;

background: #79655b;

background: linear-gradient(to right, #2a0505, #b24a16);

text-align: start;

text-decoration: none;

height: 1*px;        }            /*расположенный пунк ссылка-под панелью навигации */

#navbar li a:hover {

color: #e3dad8;

text-align: left;

background-color: #844e04;

text-decoration:underline;

background: linear-gradient(to right,  rgb(195, 89, 75), #b24a16);

      }                            /* в меню выделение пункта, который есть ссылка */

/* ================================ для выделения цитаты - как блока эпиграфа ============================ */

cite {

font-family: Times, cursive;

font-weight: 500;

                    margin-left: 0;

                    padding-left: 0;

                    text-indent: 0;

font-style: italic;

font-size: 1.1rem;

color: #2a0505;

display: inline;

text-align: left;

text-decoration: none;

background-color: beige;}                             /* текст цитат в тексте курсивом коричневым */

.cite, .cite_end { left: 10%; max-width: 70%;} /*письма в тексте*/

.epig { left: 47%; max-width: 50%;}      /*эпиграфы*/

.epig, .cite, .cite_end {

display: block;

margin: 1px;

text-indent: 0;

position: relative;

font-family: 'Neucha', cursive;

padding-left: 0.5rem;

padding-right: 0.5rem;

font-size: 0.95rem;

text-align: left;

color: #460404;

margin-bottom: 0.5rem;

   }              /* для выделения цитаты-письма*/

.cite_end {

text-align: right;

padding-right: 5em;

margin-top: 2px;

margin-bottom: 3em;

       }                        /* для выделения подписи цитаты */

.cite { text-align: justify; }

.ssilka,.ssilka p {

font-size: 0.95rem;

padding-top: 5px;

color: #080834;

font-style: italic;

}               /*в тексте примечание */

/* ================================== для верхнего колонтитула книги ==================================== */

.book_menu {

margin: 0;

height: 21px;

padding-left: 10px;

padding-right: 2px;

font-size: 0.8rem;

font-family: "Neucha", cursive;

font-weight: 400;

color: #f8e0c0;

                    background: burlywood;

background: linear-gradient(to left, rgb(195, 89, 75),#79655b);

display: block;

position: fixed;

right: 9px;

top:0;

width: calc(100% - 70pt - 29px);

text-align: right;

overflow: hidden;

}

/* =================== оформление разделов книг ================== */

.glava { /* глава или часть в книге */

padding-top: 12pt;

padding-bottom: 3px;

text-align: center;

font-size: 1.5em;

font-weight: 700;

margin-top: 0.5em;

margin-bottom: 0.5em;

   }

.autor { /*  фио автора книги */

font-family: 'Neucha', cursive;

margin: 0;

background-color: burlywood ;

text-indent: 0px;

                 text-shadow: 2px 2px 3px black,

            0 0 1.5em red,

            5px -3px 10px #8d461a; /* Параметры тени */

color: white;    /* Белый цвет текста */

font-size: 1.6em; /* Размер надписи */

text-align: center; }

.bookin { /* название книги */

margin: 0;

font-family: "Marck+Script", cursive;

background-color: burlywood ;

text-indent: 12pt;

                 text-shadow: 2px 2px 0 black,

           -2px -2px 15px #840707; /* Параметры тени */

color: white;

font-size: 1.25em; /* Размер надписи */

text-align: right;

padding-right: 5pt;

margin: 0;

}

.seria_{

 font-family: "Marck Script", cursive;

text-indent: 25px;

text-overflow: ellipsis;

display: inline;

color: #6d4104;

}

.janr {

background-color: rgba(217, 123, 110, 0.99);

font-style: italic;

font-size: 0,7rem;

color: rgba(42, 5, 5, 0.81);

 }


Дата добавления: 2019-01-14; просмотров: 131; Мы поможем в написании вашей работы!

Поделиться с друзьями:






Мы поможем в написании ваших работ!