Лабораторные работы / Методические указания к ЛР по ОАИП (09.02.07)
.pdf
3 |
e.Graphics.DrawString(printContent, |
new |
|
System.Drawing.Font("Arial", 16), Brushes.Black, 0, 0); |
|||
|
|||
4 |
} |
|
|
Метод DrawString осуществляет вставку строки printContent в печатаемый документ.
281
ЗАДАНИЕ НА ЛАБОРАТОРНУЮ РАБОТУ Модифицировать информационную систему, разработанную на лабораторной
работе 12-14, изменив степень распределенности её компонентов на клиент-серверную архитектуру. Серверная часть приложения должна производить добавление зарегистрированных пользователей в базу данных, содержать логику авторизации пользователей и восстановления пароля.
Классы, отвечающие за контекст данных, описывающие сущности в базе данных,
выполняющие сериализацию и десериализацию объектов должны подключаться через отдельную библиотеку классов (.dll файл).
Добавить в информационную систему возможность:
1.Сохранения отчетов в формате .docx. Вид документа согласуется с преподавателем;
2.Запуск печати отчетов через приложение.
Опционально. Распределить все операции, реализованные в лабораторной работе
5-7, между клиентской и серверной частью приложения.
282
ЛАБОРАТОРНАЯ РАБОТА №16
Тема: «Разработка главной страницы веб-сайта информационной системы с
использованием HTML5/CSS3»
ЦЕЛЬ РАБОТЫ Получение навыков разработки интерфейса информационной системы с
использованием веб-технологий.
ХОД РАБОТЫ
1. Структура главной веб-страницы
Главная страница сайта — своеобразная визитная карточка интернет-ресурса, на которой должна быть изложена важная информация для клиента: сведения о компании,
контактные данные, предложения и преимущества. Таким образом, к основным целям главной страницы относятся: презентация компании, привлечение аудитории и представление возможных услуг и/или товаров.
Наполнение главной страницы непосредственно зависит от направленности сайта
(продажа товаров, предоставление услуг, раскрутка бренда, блог, изложение информации и т.д.).
Внешняя структура сайта должна быть едина. Т.е. все структурные элементы должны соответствовать единому шаблону.
В качестве наглядного примера рассмотрим структурную схему интерфейса сайта https://www.cyberforum.ru/, являющегося форумом программистов, системных администраторов, администраторов баз данных, форумом по электронике и бытовой технике.
Условно структуру главной страницы форума можно разделить на следующие блоки:
1. Шапка (Header).
Здесь обязательно требуется разместить логотип организации, пару слов о реализуемых услугах, контактный телефон, кнопки регистрации, авторизации,
восстановления пароля учетной записи, корзина (если это интернет магазин). Можно указать время работы, установить строку поиска или форму обратной связи. В
зависимости от целей владельца сайта могут быть добавлены и другие данные, но здесь
283
важно не переборщить и разместить на ограниченном пространстве только самое необходимое для этой части страницы.
Рисунок 16.1 – Шапка веб-страницы
2. Меню.
Меню отвечает за удобство и служит навигатором, помогающим пользователю перемещаться по страницам сайта.
Меню форума представлено на рисунке 16.2. В нем есть ссылки на правила форума, на карту сайта, на блоги программистов и сисадминов, на сообщества и на форму для поиска по форуму.
Рисунок 16.2 – Горизонтальное меню
3. Зона контента.
Этот блок прорабатывается индивидуально для каждой веб-страницы.
На главной странице форума в зону контента входят блоки с разделами форума
(Форум программистов, компьютерный форум …), где располагается список подразделом с перечислением популярных тем. Блок с разделами представлен на рисунке 16.3.
Рисунок 16.3 – Блок с разделами форума
Под блоком с разделами форума находится блок, где размещается шесть последних записей в блоге, который постоянно обновляется. Блок последних записей блога представлен на рисунке 16.4.
284
Рисунок 16.4 – Блок последних записей блога
4. Подвал (Footer).
Это самая нижняя область сайта. Классически здесь располагается значок копирайт (©) и ярлыки социальных сетей.
Однако в этой области сайта можно рационально уместить полезную информацию для удержания подогретых посетителей и укрепления доверия.
Например, здесь гармонично будут смотреться такие сведения:
–полное наименование ИП или ООО;
–номер лицензии/сертификата;
–полный почтовый адрес.
Допускается в подвале размещения карты сайта и дублирование главного меню,
которое располагалось под шапкой сайта.
Подвал форума представлен на рисунке 16.5.
Рисунок 16.5 – Подвал сайта
На основе приведенного выше списка блоков веб-страниц, можно сформировать общую схему внешней структуры-веб страницы (Рисунок 16.6).
285
Рисунок 16.6 – Общая схема внешней структуры вебстраницы
2. Разработка веб-интерфейса главной страницы
Реализуем главную страницу для системы поиска дипломных руководителей. Для этого разработаем дизайн интерфейса главной страницы с использованием онлайн-
сервиса Figma4. Желающие изучить основные принципы работы данного сервиса могут посмотреть следующий видеокурс5.
Рисунок 16.7 – Разработанный интерфейс в Figma
4https://www.figma.com/
5https://youtube.com/playlist?list=PLaIuVNKRYUyEoKnY0UwapHPk8fEaREHPA
286
Интерфейс главной страницы разработан согласно той структурной схеме,
которая была представлена на рисунке 16.6. В сервисе Figma каждый блок представлен в виде отдельного фрейма.
Рисунок 16.8 – Фреймы главной страницы
Элементы разработанного дизайна можно экспортировать или в виде картинки
(например, формата .png), или интегрировать каждый элемент по отдельности используя автоматически генерируемый CSS код.
Рисунок 16.9 – Варианты интеграции дизайна в веб-сайт
Создадим файл index.html для размещения разметки главной страницы системы.
Листинг 16.1 – Файл index.html
1<!DOCTYPE html>
2<html lang="en">
287
3 |
<head> |
|
4 |
<meta charset="UTF-8"> |
|
5 |
<meta http-equiv="X-UA-Compatible" |
|
content="IE=edge"> |
||
|
||
6 |
<meta name="viewport" content="width=device- |
|
width, initial-scale=1.0"> |
||
|
||
7 |
<title>Document</title> |
|
8 |
<link rel="stylesheet" href="style.css"> |
|
9 |
</head> |
|
10 |
<body> |
|
11 |
<div id="header"> |
|
12 |
<div id="headerenter"> |
|
13 |
Войти |
|
14 |
</div> |
|
15 |
</div> |
|
16 |
<div id="menu"> |
|
17 |
<div id="submenu1"><div |
|
id="submenu1text">СТУДЕНТУ</div></div> |
||
18 |
<div id="submenu2"><div |
|
id="submenu2text">ПРЕПОДАВАТЕЛЮ</div></div> |
||
19 |
<div id="submenu3"><div |
|
id="submenu3text">КОНТАКТЫ</div></div> |
||
20 |
</div> |
|
21 |
<div id="content"></div> |
|
22 |
<div id="footer"> |
|
23 |
<div id="frame1">Тел.: +7 (843) 231 00 27 |
|
24 |
Email: pk@kai.ru |
|
25 |
</div> |
|
26 |
<div id="frame2">Адрес: 420111 г. Казань, |
|
27 |
ул. К. Маркса, 10</div> |
|
28 |
<div id="frame3"> |
|
29 |
<div id="frame4"> |
|
30 |
Автор идеи ©Заид Мингалиев |
|
31 |
Все права защищены |
|
32 |
</div> |
|
33 |
</div> |
|
34 |
</div> |
|
35 |
</body> |
|
36 |
</html> |
Вся разметка главной страницы в данном случае сводится к структуризации
страницы посредством тегов <div>…</div>.
Таблицу стилей разместим в файле style.css.
288
Листинг 16.2 – Файл style.css
1 |
#header |
2 |
{ |
3 |
position: absolute; |
4 |
width: 1366px; |
5 |
height: 100px; |
6 |
left: 0px; |
7 |
top: 0px; |
8 |
background: #FFFFFF; |
9 |
background-image: url(header.png); |
10 |
} |
11 |
#headerenter |
12 |
{ |
13 |
position: absolute; |
14 |
width: 81px; |
15 |
height: 54px; |
16 |
left: 1172px; |
17 |
top: 24px; |
18 |
font-family:'Gill Sans', 'Gill Sans MT', Calibri, |
'Trebuchet MS', sans-serif; |
|
19 |
font-style: normal; |
20 |
font-weight: normal; |
21 |
font-size: 24px; |
22 |
line-height: 33px; |
23 |
display: flex; |
24 |
align-items: center; |
25 |
text-align: center; |
26 |
color: #000000; |
27 |
} |
28 |
#menu |
29 |
{ |
30 |
position: absolute; |
31 |
width: 1366px; |
32 |
height: 50px; |
33 |
left: 0px; |
34 |
top: 102px; |
35 |
background: #2D56AB; |
36 |
} |
37 |
#submenu1 |
38 |
{ |
39 |
position: absolute; |
40 |
width: 442px; |
41 |
height: 50px; |
289
42 |
left: 0px; |
43 |
top: 0px; |
44 |
} |
45 |
#submenu2 |
46 |
{ |
47 |
position: absolute; |
48 |
width: 442px; |
49 |
height: 50px; |
50 |
left: 462px; |
51 |
top: 0px; |
52 |
} |
53 |
#submenu3 |
54 |
{ |
55 |
position: absolute; |
56 |
width: 442px; |
57 |
height: 50px; |
58 |
left: 924px; |
59 |
top: 0px; |
60 |
} |
61 |
#content |
62 |
{ |
63 |
position: absolute; |
64 |
width: 1366px; |
65 |
height: 516px; |
66 |
left: 0px; |
67 |
top: 152px; |
68 |
background-image: url(content.png); |
69 |
} |
70 |
#footer |
71 |
{ |
72 |
position: absolute; |
73 |
width: 1366px; |
74 |
height: 100px; |
75 |
left: 0px; |
76 |
top: 668px; |
77 |
background: #444444; |
78 |
} |
79 |
#frame1 |
80 |
{ |
81 |
position: absolute; |
82 |
width: 200px; |
83 |
height: 40px; |
84 |
left: 0px; |
85 |
top: 30px; |
290