Файл: Лабораторная работа 01 по о. 12 технологии обработки информации Студент гр. Иб71вп П. П. Иванов.docx
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 08.11.2023
Просмотров: 66
Скачиваний: 4
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА» (СПбГУТ)Кафедра информационных управляющих систем
Код CSS для настройки отображения данных: [поменять настройки для всех элементов таблицы, выделив 2 цветовых решения для дальнейшей подсветки элементов таблицы; minimalistBlack переименовать].data_select {background-color:red}.data_default {background-color:blue}td{width: 100px; height:15px; border: 1px solid gray;}table.minimalistBlack {border: 3px solid #000000;width: 100%;text-align: left;border-collapse: collapse;}table.minimalistBlack td, table.minimalistBlack th {border: 1px solid #000000;padding: 5px 4px;}table.minimalistBlack tbody td {font-size: 13px;}table.minimalistBlack thead {background: #CFCFCF;border-bottom: 3px solid #000000;}table.minimalistBlack thead th {font-size: 15px;font-weight: bold;color: #000000;text-align: left;}table.minimalistBlack tfoot {font-size: 14px;font-weight: bold;color: #000000;border-top: 3px solid #000000;}table.minimalistBlack tfoot td {font-size: 14px;}Код "заглушек" для встраивания JavaScript:function InitializeTable(){console.log("Выполнена функция инициализации данных при загрузке");}function ShowNavigators(){console.log("Выполнена функция отображения таблицы Навигаторы");}function ShowVendors(){console.log("Выполнена функция отображения таблицы Производители");}Продемонстрируем построение таблицы Navigators (рис. 1) и Vendors (рис. 2).Рис. 1. Демонстрация результата загрузки таблицы Navigators
Рис. 2. Демонстрация результата загрузки таблицы VendorsВывод: об использовании HTML+CSS для отображения данных: плюсы и минусы: 5-7 строк.
Лабораторная работа № 01
по Б1.О.12 «ТЕХНОЛОГИИ ОБРАБОТКИ ИНФОРМАЦИИ»Студент гр. ИБ-71вп_____________________________ П. П. Иванов(подпись)Проверил ___________________________ А. В. Параничев(оценка и подпись)Санкт-Петербург2023 год ОТОБРАЖЕНИЕ ДАННЫХ В ТАБЛИЧНОМ ВИДЕ С ПОМОЩЬЮ HTML и CSSЗапишем табличные данные для индивидуального варианта заданий с помощью HTML+CSS, используя онлайн-ресурс JSFiddle [любой из ресурсов "песочницы" (sandbox) или https://codesandbox.io/s/2lnox6vln или https://codepen.io/ppjln/pen/oEZXjV ] https://jsfiddle.net/3d47abe9/ [выделенное зеленым прочитать и перед отправкой отчета удалить; выделенное желтым поменять на свое; в данном задании нужно оформить HTML+CSS, а для скрипта JS оставить только "заглушки"]Код HTML отображения таблицы: [подставить свои данные, minimalistBlack переименовать, все методы и таблицы также переименовать; после выполнения работы подставить онлайн-ссылку, нажав "Save" и "OK" в меню!!! данные следует взять из табл. 1]Таблица 1Индивидуальное задание| Пред-послед-няя цифра зачетной книжки | Послед-няя цифра зачетной книжки | Тематика табличных данных (выбрать 5 параметров для отображения 8 записей; данные можно сформировать примерно или используя Интернет ) |
| 0,2,4,6,8 | 0 | Грузовые автомобили |
| 0,2,4,6,8 | 1 | Легковые автомобили |
| 0,2,4,6,8 | 2 | Мотоциклы |
| 0,2,4,6,8 | 3 | Велосипеды |
| 0,2,4,6,8 | 4 | Бытовые нагреватели |
| 0,2,4,6,8 | 5 | Бытовые вентиляторы |
| 0,2,4,6,8 | 6 | Серверы хранения данных |
| 0,2,4,6,8 | 7 | Среды разработки |
| 0,2,4,6,8 | 8 | Операционные системы |
| 0,2,4,6,8 | 9 | Помещения для командных игр |
| 1,3,5,7,9 | 0 | Техника для уборки гостиниц |
| 1,3,5,7,9 | 1 | Данные зачетной книжки студента |
| 1,3,5,7,9 | 2 | Данные экзаменационной ведомости |
| 1,3,5,7,9 | 3 | Музыкальные предпочтения |
| 1,3,5,7,9 | 4 | Устройства микроклиматического контроля |
| 1,3,5,7,9 | 5 | Средства портативного освещения |
| 1,3,5,7,9 | 6 | Средства освещения автомобиля |
| 1,3,5,7,9 | 7 | Автоинструменты |
| 1,3,5,7,9 | 8 | Пожарное оборудование |
| 1,3,5,7,9 | 9 | Отопительное оборудование |
Встроенная JS-таблица
HTML-таблица навигаторов
| index | Название | Производитель | Цена |
|---|---|---|---|
| 0 | Навигатор 1 | Navitel | 15000 |
| 1 | Навигатор 2 | Garmin | 14000 |
| 2 | Навигатор 3 | Navitel | 16000 |
HTML-таблица производителей навигаторов
| index | Название производителя |
|---|---|
| 0 | Navitel |
| 1 | Garmin |
Рис. 2. Демонстрация результата загрузки таблицы VendorsВывод: об использовании HTML+CSS для отображения данных: плюсы и минусы: 5-7 строк.