ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
Кафедра безопасности информационных систем
ОТЧЁТ
по практической работе №5 на тему: «Создание web-страницы с использованием css»
по дисциплине «Основы интернет-технологий»
Выполнил: студент группы ИСТ-011, Гладышев М.Д.
« » января 2021 г. ___________/Гладышев М.Д./
Принял: Исупова Е. А.
« » 2021 г. ___________/Е.А. Исупова
СОДЕРЖАНИ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА» 1
(СПбГУТ) 1
Цель работы 3
Ход работы 4
ЗАКЛЮЧЕНИЕ 14
Цель работы
Изучение средств оформления HTML- документов с использованием каскадных таблиц стилей CSS.
Ход работы
Задание 1
1. Создать web-страницу index.html со стандартным начальным кодом
2. В тело страницы включить необходимое количество блоков div с идентификаторами ID для создания уникальных функциональных областей согласно макету на рис.3.
3. Создать стилевое оформление для элементов (заголовки, абзацы, ссылки) в блоках (функциональных областях) с использованием внутренней таблицы стилей, разместив в разделе head с помощью тега style.
4. В блоки «наименование лабораторной работы» и «личные данные» вставить соответствующий текст, используя способ встраивания стиля (размер шрифта, цвет, выравнивание и т.п.) в тег.
5. В блоке «навигация» создать ссылки на страницы page1.html, page2.html и page3.html. Задать псевдостили ссылкам.
6. В блоке «контент» создать два абзаца текста с соответствующими заголовками. Стилевое оформление задать с использованием атрибутов класс.
7. Включить в головную часть необходимые метаданные для поисковых систем.
8. Привести скриншот страницы.
9. Представить листинг кода страницы.
рис 1. index.html
рис 2. index.html с выделенной ссылкой
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Лабораторная работа № 5</title>
<style type="text/css">
body,html
{
padding: 0 0 0;
margin:0 ;
background-color:#0e0d0d;
}
#container
{
width:100%;
margin:0 0;
font-family: "Arial";
}
#header
{
color: #b64b48;
text-align : start;
font-size: 40px;
padding: 20px;
padding-left: 20%;
font-weight: 700;
}
#nav
{
height: 430px;
padding-left: 30px;
width: 10%;
text-align: start;
float: left;
}
a
{
color: #a5a5a5;
font-size: 20px;
text-decoration: none;
transition: color .3s;
}
a:hover
{
color: #fff;
}
#text
{
padding-left: 270px;
padding-top: 30px;
height: 400px;
background-color: #0e0d0d;
text-align: start;
color: #fff;
}
#footer
{
text-align : right;
clear:both;
color: #fff;
padding-right: 100px;
padding-top: 50px;
}
</style>
</head>
<body>
<div ID ="container">
<header>
<div ID ="header">Создание web-страницы с использованием CSS
</div>
<nav>
<div ID ="nav">
<div ID ="nav_link" style="padding-top: 30px"><a href="page1.html">Что такое 3D графика</a></div>
<div ID ="nav_link" style="padding-top: 20px"><a href="page2.html">Как создаётся 3D графика</a></div>
<div ID ="nav_link" style="padding-top: 20px"><a href="page.3%20.html">Трёхмерные дисплеи</a></div>
</div>
</nav>
</header>
<main>
<div ID ="text">
<h2 style="margin: 0">Визуализация трёхмерной графики в играх и прикладных программах</h2>
<p style="margin: 20px">Есть ряд программных библиотек для визуализации трёхмерной графики в прикладных программах — DirectX, OpenGL и так далее.
<p style="margin: 20px">Есть ряд подходов по представлению 3D-графики в играх — полное 3D, псевдо-3D.</p>
<p style="margin: 20px">Есть множество движков, используемых для создания трёхмерных игр, отвечающих не только за трёхмерную графику, но и за расчёты физики игрового мира, взаимодействия пользователя с игрой и связь пользователей в игре при многопользовательском режиме и многое другое (см. также статью 3D-шутер). Как правило, движок разрабатывается под конкретную игру, а затем лицензируется (становится доступен) для создания других игр.</p>
<h2 style="margin-top: 40px">Моделирование деталей и механизмов для производства</h2>
<p style="margin: 20px">Существуют конструкторско-технологические пакеты CAD/CAE/CAM, предполагающие создание моделей деталей и конструкций, их расчёт, оформление по ним конструкторско-технологической документации и, при необходимости, последующее формирование программ для станков ЧПУ и 3D-принтеров. Общеупотребительным для данных групп программного обеспечения является термин "система автоматизированного проектирования" (САПР).</p>
<p style="margin: 20px">Особенностью данных пакетов является точность построения модели с возможностью генерации с нее геометрически точных разрезов, сечений, получения расчетной информации о массе изделия или конструкции и различного рода проекций.</p>
<p style="margin: 20px">Такие пакеты даже не всегда дают пользователю оперировать 3D-моделью напрямую, например, есть пакет OpenSCAD, модель в котором формируется выполнением формируемого пользователем скрипта, написанного на специализированном языке.</p>
</div>
</main>
<footer>
<div ID ="footer">Гладышев М.Д. ИСТ-011
</div>
</footer>
</div>
</body>
</html>
Задание 2
1. Создать web-страницу page3.html способом блочной верстки. Макет страницы задать самостоятельно.
2. Создать внешний файл style1.css, разместив в одной папке со страницами index.html, page1.html, page2.html и page3.html.
3. В тело страницы включить необходимое количество блоков div с идентификаторами ID для создания уникальных функциональных областей.
4. Создать стилевое оформление для элементов (заголовки, абзацы, ссылки) в блоках (функциональных областях) способом связывания с внешней таблицей стилей style1.css. Ссылка на файл с таблицей стилей осуществляется с использованием тега link. Тег link указывается в контейнере head.
5. Создать навигацию со страницей index.html.