Исследование использования программ дистанционного обучения для подготовки учебно-методической документации (стр. 16 из 27)
Рисунок 2. 19 - Рабочая область страницы
2.6.2 Использование каскадных таблиц стилей CSS
В программе для удобства вывода интерфейсных элементов используются каскадные таблицы стилей CSS. Все стили хранятся в файле rli_style. css. Присоединение таблицы стилей к странице осуществляется следующим образом:
<link href="rli_style. css" rel="stylesheet" type="text/css">
Вывести стиль применительно к элементу страницы можно, задав свойству class элемента название стиля, например, class=\"buttonOrange\".
Для создания стиля необходимо добавить в файл rli_style. css строку стиля в следующем виде:
Название стиля {Свойство стиля: Значение; Свойство стиля: Значение; }
Основные свойства стилей приведены в таблице 2.11
Таблица 2.11 - Назначение свойств стилей
| №п/п | Имя свойства | Назначение свойства |
| 1 | height | Высота элемента |
| 2 | width | Ширина элемента |
| 3 | border-top | Параметры верхней границы |
| 4 | border-bottom | Параметры нижней границы |
| 5 | border-left | Параметры левой границы |
| 6 | border-right | Параметры правой границы |
| 7 | font-family | Семейство шрифта |
| 8 | font-size | Размер шрифта |
| 9 | font-weight | Свойства шрифта |
| 10 | color | Цвет текста |
| 11 | background-color | Цвет фона |
| 12 | background-image | Фоновый рисунок |
| 13 | border | Тип границы |
Как уже говорилось ранее, файл, где хранятся стили, называется rli_style. css. Основные стили, используемые в приложении, и их описание, приведено в таблице 2.12.
Таблица 2.12 - Используемые каскадные таблицы стилей
| №п/п | Название стиля | Назначение стиля |
| 1 | center,a,div,tr,td,table, input,textarea,p,small,body | Стили для тэгов |
| 2 | popfirst, poplast | Стиль пунктов меню |
| 3 | a. m, a. ml | Cтили ссылок |
| 4 | brbt | Рамка для пунктов меню |
| 5 | bpics | Высота белых полосок в меню |
| 6 | bcoursespic, btrainingpic, bcontactspic, baboutpic, bstudentpic, badminpic | Ширина белых полосок в меню |
| 7 | bb, bn, bi, bd | Рамки таблиц |
| 8 | popuser, a. pmenu | Пункты в меню |
| 9 | textheader | Стиль текста заголовка |
| 10 | textonlightblue | Текст на светло-голубом фоне |
| 11 | textonlight | Текст на светлом фоне (основной) |
| 12 | textonblue | Текст на синем фоне |
| 13 | textonorange | Текст на оранжевом фоне |
| 14 | textrederror | Текст ошибки |
| 15 | a | Основная ссылка |
| 16 | a. light | Текст ссылки |
| 17 | a. notunder | Текст ссылки без подчеркивания |
| 18 | buttonBlue | Синяя кнопка |
| 19 | buttonOrange | Оранжевая кнопка |
| 20 | buttonFiolete | Фиолетовая кнопка |
| 21 | hr_onlightblue_orange | Оранжевая разделительная полоска |
| 22 | hr_onlightblue_blue | Синяя разделительная полоска |
| 23 | table_admin | Таблицы на странице администрирования |
2.6.3 Файловая структура приложения
Все файлы приложения размещаются в корневом каталоге сайта. Проект содержит несколько подкаталогов:
config, каталог с файлами конфигурации Apache и MySQL, а также тестовую базу данных;
data, хранит файлы описания и картинки курсов;
dbedit, хранит скрипты для создания базы данных (db_create_rli. php);
files, хранит файлы для загрузки студентами, может содержать отдельные подкаталоги для каждого курса для закачки подразделов курсов;
images, хранит все файлы изображений, используемые в приложении;
news, в котором хранятся файлы новостей для таблицы news.
В корневом каталоге хранятся файлы, описанные в таблице 2.13.
Таблица 2.13 - Описание файловой структуры приложения
| №п/п | Название файла | Назначение файла | |
| 1 | 2 | 3 | |
| 1 | about_contacts. php | Страница о контактах | |
| 2 | about_contacts_right. php | Область для вывода данных страницы о контактах | |
| 3 | about_faq. php | Страница вопросов ответов | |
| 4 | about_faq_right. php | Область для вывода данных страницы вопросов и ответов | |
| 5 | about_info. php | Страница о проекте | |
| 6 | about_info_right. php | Область для вывода данных страницы о проекте | |
| 7 | about_teachers. php | Страница о преподавателях | |
| 8 | about_teachers_right. php | Область для вывода данных страницы о преподавателях | |
| 9 | admin. php | Страница администрирования | |
| 10 | admin_add. php | Модуль администрирования - добавление данных в таблицу | |
| 11 | admin_add_check. php | Модуль администрирования - проверка добавления данных в таблицу | |
| 12 | admin_del. php | Модуль администрирования - удаление данных из таблицы | |
| 13 | admin_edit. php | Модуль администрирования - вывод таблицы для редактирования | |
| 14 | admin_right. php | Область для вывода данных страницы администрирования | |
| 15 | admin_update. php | Модуль администрирования - форма обновления | |
| 16 | admin_update_check. php | Модуль администрирования - проверка обновления | |
| 17 | body_left. php | Левая часть всех страниц | |
| 18 | body_list_after_header. php | Средняя часть (вывода данных) оранжевого фрейма | |
| 19 | body_list_footer. php | Нижняя часть оранжевого фрейма | |
| 20 | body_list_header. php | Заголовочная часть оранжевого фрейма | |
| 21 | body_right. php | Область для вывода данных главной страницы | |
| Продолжение таблицы 2.13 | |||
| 1 | 2 | 3 | |
| 22 | buttom. php | Нижняя строка всех страниц | |
| 23 | contacts. php | Страница общения | |
| 24 | contacts_chat. php | Страница чата | |
| 25 | contacts_chat_right. php | Область для вывода данных страницы чата | |
| 26 | contacts_forum. php | Страница форума | |
| 27 | contacts_forum_right. php | Область для вывода данных страницы форума | |
| 28 | contacts_guestbook. php | Страница гостевой книги | |
| 29 | contacts_guestbook_right. php | Область для вывода данных страницы гостевой книги | |
| 30 | contacts_right. php | Область для вывода данных страницы общения | |
| 31 | courses. php | Информация о курсах | |
| 32 | courses_for_students. php | Страница курсов | |
| 33 | courses_for_students_right. php | Область для вывода данных страницы курсов | |
| 34 | courses_info. php | Информация о курсах | |
| 35 | courses_info_right. php | Область для вывода данных информации о курсах | |
| 36 | courses_literature. php | Страница рекомендуемой литературы | |
| 37 | courses_literature_right. php | Область для вывода данных страницы рекомендуемой литературы | |
| 38 | courses_organization. php | Страница организации обучения | |
| 39 | courses_organization_right. php | Область для вывода данных страницы организации обучения | |
| 40 | courses_registration. php | Проверка регистрации на курсы | |
| 41 | courses_registration_right. php | Область для вывода данных страницы проверки регистрации на курсы | |
| 42 | courses_right. php | Область для вывода данных страницы о курсах | |
| 43 | courses_technology. php | Страница технологии обучения | |
| 44 | courses_technology_right. php | Область для вывода данных страницы технологии обучения | |
| 45 | download. php | Страница загрузок | |
| 46 | download_right. php | Область для вывода данных страницы загрузок | |
| 47 | error. php | Страница вывода ошибки | |
| 48 | error_right. php | Область для вывода данных страницы ошибки | |
| 49 | find. php | Страница организации поиска | |
| 50 | find_right. php | Область для вывода данных страницы организации поиска | |
| 51 | header. php | Заголовок всех страниц | |
| 52 | index. php | Главная страница | |
| 53 | login_form. php | Модуль отображения данных о пользователе вошедшем в систему | |
| 54 | menu. php | Модуль основного меню | |
| 55 | menu_adm. php | Меню администрирования | |
| 56 | menu_adm_rli. js | Формирование пунктов меню администрирования | |
| 57 | menu_rli. js | Формирование пунктов основного меню | |
| 58 | news. php | Страница новостей | |
| 59 | news_list_after_header. php | Основная часть фрейма новостей слева | |
| 60 | news_list_footer. php | Нижняя часть фрейма новостей слева | |
| 61 | news_list_header. php | Заголовок фрейма новостей слева | |
| 62 | news_right. php | Область для вывода данных страницы новостей | |
| Продолжение таблицы 2.13 | |||
| 1 | 2 | 3 | |
| 63 | option. php | Параметры подключения к серверу MySQL | |
| 64 | popup_me. js | Модуль формирования и отображения меню | |
| 65 | progress. php | Страница успеваемости | |
| 66 | progress_right. php | Область для вывода данных страницы успеваемости | |
| 67 | rli_style. css | Каскадная таблица стилей приложения | |
| 68 | statistics. php | Страница статистики | |
| 69 | statistics_right. php | Область для вывода данных страницы статистики | |
| 70 | student. php | Страница информации для студента | |
| 71 | student_right. php | Область для вывода данных страницы информации для студента | |
| 72 | student_shedule_exams. php | Страница расписания экзаменов | |
| 73 | student_shedule_exams_right. php | Область для вывода данных страницы расписания экзаменов | |
| 74 | student_shedule_from_teacher. php | Страница информации преподавателей курсов | |
| 75 | student_shedule_from_teacher_right. php | Область для вывода данных страницы информации преподавателей курсов | |
| 76 | student_shedule_internal. php | Страница расписания очных занятий | |
| 77 | student_shedule_internal_right. php | Область для вывода данных страницы расписания очных занятий | |
| 78 | student_shedule_tutorial. php | Страница расписания консультаций | |
| 79 | student_shedule_tutorial_right. php | Область для вывода данных страницы расписания консультаций | |
| 80 | training. php | Личная страница обучения | |
| 81 | training_check_registration. php | Страница проверки регистрации пользователей | |
| 82 | training_check_registration_right. php | Область для вывода данных страницы проверки регистрации пользователей | |
| 83 | training_registration. php | Страница регистрации курсов | |
| 84 | training_registration_right. php | Область для вывода данных страницы регистрации курсов | |
| 85 | training_right. php | Область для вывода данных страницы обучения | |
| 86 | training_test. php | Страница тестирования | |
| 87 | training_test_right. php | Область для вывода данных страницы тестирования | |
| 88 | user_form. php | Часть левой страницы с полями ввода логина и пароля | |
2.6.4 Формирование страниц приложения
Все скрипты PHP заключаются в скобки <? и? >. Язык позволяет формировать страницы из нескольких отдельных составляющих. Для этого используются функции include и require. Например, скрипт