2.3 Основні рішення щодо реалізації компонентів системи
За основу інтерфейсу програми було прийнято стандартний стиль оформлення сайтів.
Теги HTML, які були використані при розробці додатку описані нижче.
<html> </ html> Вказує програмі перегляду сторінок що це HTML документ.
<head> </ head> Визначає місце, де міститься різна інформація не відображається в тілі документа. Тут розташовується тег назви документа та теги для пошукових машин.
<body> </ body> Визначає видиму частину документа
Теги змісту
<base href="www.?"> Вказівка браузеру від якого базового адреси всі посилання (крім посилань явно прописаних повністю)
<base target="?"> Вказівка браузеру від якого базового вікна в якому відкриваються всі посилання (крім посилань з окремим зазначенням даного параметра)
<meta name="allow-search" content="?"> Вказівка для пошукових роботів як слід сканувати дану сторінку
<meta http-equiv="distribution" content="?"> Вказівка для пошукових роботів чи відноситься дана сторінка до світових
<meta name="robots" content="?"> Вказівка для пошукових роботів як слід сканувати дану сторінку
<meta name="author" content="?"> Вказівка автора сторінки
<meta name="keywords" content="?"> Опис міститься інформації (для пошукових машин)
<meta http-eguiv="content-type" content="text/plain;churset="?"> Вказівка браузеру в якому кодуванні слід довантажувати сторінку (Window-1251, KOI8-R, KOI8-U, ISO-8859-5 , UTF-8, UTF-16 і д.р.)
Деякі хостинги (восновном іноземні) автоматично перекодує сторінки одержувані сервером в певну кодування. Тому уточнюйте передпостановкой цього тега у постачальників хостингу це питання.
<meta name="description" content="?"> Ключові слова сторінки (для пошукових машин)
<title> </ title> Поміщає назва документа до змісту програми перегляду сторінок
Атрибути тіла документа
<body bgcolor="?"> Встановлює колір фону документа, використовуючи значення кольору у вигляді RRGGBB - приклад: FF0000 - червоний колір.
<body text="?"> Встановлює колір тексту документа, використовуючи значення кольору у вигляді RRGGBB - приклад: 000000 - чорний колір.
<body link="?"> Встановлює колір гіперпосилань, використовуючи значення кольору у вигляді RRGGBB - приклад: 00FF00 - зелений колір.
<body vlink="?"> Встановлює колір гіперпосилань, на яких ви вже побували, використовуючи значення кольору у вигляді RRGGBB - приклад: 333333 - сірий колір.
<body alink="?"> Встановлює колір гіперпосилань при натисканні.
Теги форматування тексту
<pre> </ pre> Обрамляє попередньо відформатований текст.
<h1> </ h1> Створює найбільший заголовок
<h2> </ h2>, <h3>, </ h3> <h4> </ h4>, <h5>, </ h5> Створює заголовок проміжних розмірів
<h6> </ h6> Створює самий маленький заголовок
<b> </ b> Створює жірий текст (нерекомендовані)
<i> </ i> Створює похилий текст (нерекомендовані)
<tt> </ tt> Створює текст - імітує стиль друкарської машинки. (Нерекомендовані)
<kbd> </ kbd> Створює текст - імітує стиль друкарської машинки. (Рекомендований)
<var> </ var> Назва змінних відображається курсивом
<cite> </ cite> Виділення цитат курсивом
<address> </ address> Відображається курсивом у вигляді окремого абзацу
<em> </ em> Похилий текст (сприймається поскових роботами як виділення)
<strong> </ strong> Жирний текст (сприймається поскових роботами, як особливо сильне виділення)
<font size="?"> </ font> Встановлює розмір тексту в межах від 1 до 7.
<font color="?"> </ font> Встановлює колір тексту, використовуючи значення кольору у вигляді RRGGBB.
Гіперпосилання
<a href="URL"> </ a> Створює гіперпосилання на інші сайти.
<atarget="?"> </ a> Вказує в якому вікні відкривати гіперпосилання.
параметри Значення
_Blank Завантаження вмісту сторінки, заданої посиланням, в нове пусте вікно
_Parent Завантаження вмісту сторінки, заданої посиланням, у вікно, яке містить посилання
_Self Завантаження вмісту сторінки, заданої посиланням, у вікно, ігноруючи використовувані фрейми
_Top Завантаження вмісту сторінки, заданої посиланням, у вікно, ігноруючи використані фрейми
При використанні фреймів і вкладених фреймів значенням може виступати ім'я фрейма або вкладеної сітки фреймів, пріетом сторінка відкриється в вказаної частини вікна.
<a href="NAME"> </ a> Створює гіперпосилання на іншу сторінку.
<a href="mailto:EMAIL"> </ a> Створює гіперпосилання виклику поштової програми для написання листа за вказаною адресою.
<a href="#name"> </ a> Створює гіперпосилання на мітку поточної сторінки.
<a name="name"> </ a> Зазначає частину тексту, як позначку для гіпперссилок на сторінці.
<a href="NAME#name"> </ a> Створює гіперпосилання на мітку іншої сторінки.
Форматування
<p> </ p> Створює новий параграф
<p align="?"> </ p> Вирівнює параграф щодо однієї з сторін документа, значення: left, right, justify або center
<nobr> Забороняє переклад рядка.
<wbr> Вказує де розбивати рядок для переносу при необхідності.
<br> Вставляє переклад рядка.
<blockquote> </ blockquote> Створює відступи з обох сторін тексту.
<dl> </ dl> Створює список визначень.
<dt> Визначає кожен з термінів списку
<dd> Описує кожне визначення
<ol> </ ol> Створює нумерований список
<li> Визначає кожен елемент списку і присвоює номер
<ul> </ ul> Створює ненумерований список
<li> Передує кожен елемент списку і додає гурток чи квадратик.
<div align="?"> </ div> Важливий тег використовується для форматування великих блоків тексту HTML документа, також використовується в таблицях стилів
Графічні елементи
<img src="name"> Додає зображення в HTML документ
<img src="name" align="?"> Вирівнює зображення до однієї зі сторін документа, приймає значення: left, right, center; bottom, top, middle
<img src="name" border="?"> Встановлює товщину рамки навколо зображення
<img src="name" vspase="?"> Встановлює поля зверху і знизу
<img src="name" hspase="?"> Встановлює поля збоку
<img src="name" alt="?"> Спливаюча підказка при наведенні на імедж
<hr> Додає в HTML документ горизонтальну лінію.
<hr size="?"> Встановлює висоту (товщину) лінії
<hr width="?"> Встановлює ширину лінії, можна вказати ширину в пікселах або відсотках.
<hr noshade> Створює лінію без тіні.
<hr color="?"> Задає лінії певний колір. Значення RRGGBB.
Таблиці
<table> </ table> Створює таблицю.
<tr> </ tr> Визначає рядок у таблиці.
<td> </ td> Визначає окрему клітинку в таблиці.
<th> </ th> Визначає заголовок таблиці (нормальна осередок з відцентрованим жирним текстом)
<caption> </ caption> Визначає підпис таблиці
Атрибути таблиці
<table border="#"> Задає товщину рамки таблиці.
<table cellspacing="#"> Задає відстань між осередками таблиці.
<table cellpadding="#"> Задає відстань між вмістом комірки і її рамкою.
<table width="#"> Встановлює ширину таблиці в пікселах або відсотках від ширини документа.
<table height="#"> Встановлює висоту таблиці в пікселах або відсотках від висоти документа.
<tr align="?"> або <td align="?"> Встановлює вирівнювання осередків у таблиці, приймає значення: left, center, або right.
<tr valign="?"> або <td valign="?"> Встановлює вертикальне вирівнювання для елементів таблиці, приймає значення: top, middle, або bottom.
<td colspan="#"> Вказує кількість стовпців, які об'єднано в одній клітинці. (За замовчуванням = 1)
<td rowspan="#"> Вказує кількість рядків, яке об'єднано в одній клітинці. (За замовчуванням = 1)
<td nowrap> Не дозволяє програмі перегляду робити переклад рядка у клітинці таблиці.
<td width="#"> Встановлює ширину комірки в пікселах або відсотках від ширини таблиці (осередки одного стовпця не можуть мати різну ширину).
<td height="#"> Встановлює висоту комірки в пікселах або відсотках від висоти таблиці (клітинки одного рядка не можуть мати різну висоту).
Фрейми
<frameset> </ frameset> Передує тег <body> в документі, що містить фрейми;
<frameset rows="value,value"> Визначає рядка в таблиці фреймів, висота яких визначена кол-вом пікселів або у відсотковому співвідношенні до висоти таблиці фреймів.
<frameset cols="value,value"> Визначає стовпці в таблиці фреймів, ширина яких визначена кол-вом пікселів або у відсотковому співвідношенні до ширини таблиці фреймів.
<frame> Визначає одиничний фрейм або область в таблиці фреймів.
<noframes> </ noframes> Визначає, що буде показано у вікні браузера, якщо він не підтримує фрейми.
Атрибути фреймів
<frame src="URL"> Визначає який з HTML документів буде показаний у фреймі.
<frame name="name"> Вказує Ім'я фрейма або області, що дозволяє перенаправляти інформацію в цей фрейм або область з інших фреймів.
<frame marginwidth="#"> Визначає величину відступів по лівому і правому краях в нутро фрейма; має дорівнювати або більше 1.
<frame marginheight="#"> Визначає величину відступів по верхньому і нижньому краях в нутро фрейма; має дорівнювати або більше 1.
<frame scrolling=VALUE> Вказує буде-ли виводиться лінійка прокрутки у фреймі; значення value може бути "yes," "no," або "auto". Значення за замовчуванням для звичайних документів - auto.
<frame noresize> Перешкоджає зміни розмірів фрейма користувачем.
Іфрейм і його атрибути
<iframe> </ iframe> Створює контейнер, який може містити будь-які елементи. Інші елементи обтікають цей контейнер.
<iframe src="URL"> Визначає який з HTML документів буде показаний в іфрейме.
<iframe name="name"> Вказує Ім'я іфрейма, що дозволяє перенаправляти інформацію в цей іфрейм.
<iframe vspase="?"> Встановлює поля зверху і знизу з зовні від іфрейма
<iframe hspase="?"> Встановлює поля збоку з зовні від іфрейма
<iframe marginwidth="#"> Визначає величину відступів по лівому і правому краях в нутро іфрейма; має дорівнювати або більше 1.
<iframe marginheight="#"> Визначає величину відступів по верхньому і нижньому краях в нутро іфрейма; має дорівнювати або більше 1.
<iframe scrolling=VALUE> Вказує буде-ли виводиться лінійка прокрутки в іфрейме; значення value може бути "yes," "no," або "auto". Значення за замовчуванням для звичайних документів - auto.
<iframe width="#"> Визначає ширину іфрейма
<iframe height="#"> Визначає висоту іфрейма;
<iframe title="?"> Текст підказки
Форми
<form> </ form> Створює форми
<select multiple name="NAME" size="?"> </ select> Створює скроліруемое меню. Size встановлює кількість пунктів меню, яке буде показано на екрані, інші будуть доступні при використанні прокрутки.
<option> Вказує кожен окремий елемент меню
<select name="NAME"> </ select> Створює спадаюче меню
<option> Вказує кожен окремий елемент меню
<textarea name="NAME" cols=40 rows=8> </ textarea> Створює вікно для введення тексту. Columns вказує ширину вікна; rows вказує його висоту.
<input type="checkbox" name="NAME"> Створює checkbox.
<input type="radio" name="NAME" value="x"> Створює radio кнопку.
<input type=text name="foo" size=20> Створює рядок для введення тексту. Параметром Size вказується довжина в символах.
<input type="submit" value="NAME"> Створює кнопку "Відправити"
<input type="image" border="0" name="NAME" src="name.gif"> Створює кнопку "Відправити" - для цього використовується зображення
<input type="reset"> Створює кнопку "Очистити"
2.3.1 Використані моделі даних
Для розробки даного програмного продукту використано реляційну модель даних представлену на рисунку 2.1.
У реляційній моделі дані розбиваються на набори, які становлять табличну структуру. Ця структура таблиць складається з індивідуальних елементів даних, називаних полями. Одиночний набір або група полів відома як запис.
Використовуюється база даних системи керування вмістом Joomla.
Рисунок 2.1 – Реляційна модель
База даних містить наступні таблиці:
bak_slo9a_users (рис.2.2). Одна з головних таблиць, в якій зберігаються дані про користувачів сайту;
Рисунок 2.2 –Таблиця bak_slo9a_users
slo9a _weblinks (рис.4). Дана таблиця зберігає дані про посилання;
Рисунок 4 – Таблиця slo9a _weblinks
slo9a _content (рис.5). Зберігає в таблиці інформацію про матеріали та статті сайту;
Рисунок 5 – Таблиця slo9a _content
bak_slo9a_usergroups (рис.6). В цій таблиці зберігаеться вся допоміжна інформація про користувачів, а саме про групи користувачів;
Рисунок 6 – Таблиця bak_slo9a_usergroups
bak_slo9a_weblinks ( рис 7). Містить інформацію про доступність статей та опцій для різних користувачів.
Рисунок 7 – Таблиця wp_links
Физічна модель сайту представлена на рисунку 8.
Рисунок 8 − Фізична структура сайту
Логічна структура сайту представлена на рисунку 9.
Рисунок 9 − Логічна структура сайту
Елементи структури сайту описані нижче:
головна сторінка. Є основною точкою входу на сайт. Призначення:
1) ідентифікувати сайт, як представництво в інтернет;
2) забезпечувати доступ до всіх основних розділів сайту (розділів 1-го рівня);
3) інформувати відвідувачів про новини компанії.
Головна сторінка повинна містити наступні основні елементи:
ідентифікаційні дані;
До ідентифікаційним відносяться дані, що дозволяють ототожнити сайт з компанією.
1) назва компанії;
2) копірайт.
навігація по розділах 1-го рівня;
На сторінці повинні бути присутніми посилання на наступні розділи 1-го рівня:
1) « Главная»;
2) «Услуги»;
3) «Контакты»;
блок входу на сайт;
внутрішні сторінки (загальні вимоги);
Всі внутрішні сторінки сайту повинні містити наступні элементи:
1) назва компанії;
2) копірайт;
3) навігація по розділах 1-го рівня;
4) заголовок розділу.