6. Привести скриншот страницы.
7. Представить листинг кода страницы.
рис 3. page3.html
рис 4. page3.html с выделенной ссылкой
HTML:
<!DOCTYPE html>
<html lang="en ru">
<head>
<meta charset="UTF-8">
<title>Лабораторная работа №5</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="header_inner">
<div id="logo" class="header_logo">Трёхмерные дисплеи</div>
<nav id="navigation" class="nav">
<a class="nav_link" href="page1.html">Что такое 3D графика</a>
<a class="nav_link" href="page2.html">Как создаётся 3D графика</a>
<a class="nav_link" href="index.html">Программное обеспечение</a>
</nav>
</div>
</div>
</header>
<div id="main" class="main">
<div class="container">
<div class="main_inner">
<h1 class="main-title">Трёхмерные, или стереоскопические дисплеи</h1>
<p>Дисплеи, посредством стереоскопического или какого-либо другого эффекта создающие иллюзию реального объёма у демонстрируемых изображений.</p>
<p>В настоящее время подавляющее большинство трёхмерных изображений показывается при помощи стереоскопического эффекта, как наиболее лёгкого в реализации, хотя использование одной лишь стереоскопии нельзя назвать достаточным для объёмного восприятия. Человеческий глаз как в паре, так и в одиночку одинаково хорошо отличает объёмные объекты от плоских изображений</p>
<h1 class="main-title">Стереоскопические дисплеи</h1>
<p>Методы технической реализации стереоэффекта включают использование в комбинации со специальным дисплеем поляризованных или затворных очков, синхронизированных с дисплеем, анаглифических фильтров в комбинации со специально адаптированным изображением.</p>
<p>Существует также относительно новый класс стереодисплеев, не требующих использования дополнительных устройств, но имеющих массу ограничений. В частности, это конечное и очень небольшое количество ракурсов, в которых стереоизображение сохраняет чёткость. Стереодисплеи, выполненные на базе технологии New Sight x3d, обеспечивают восемь ракурсов, Philips WOWvx — девять ракурсов. В октябре 2008 года компания Philips представила прототип стереодисплея с разрешением 3840×2160 точек и с рекордными 46 ракурсами «безопасного» просмотра. Вскоре после этого, однако, Philips объявил о приостановке разработок и исследований в области стереодисплеев</p>
<p>Ещё одна проблема стереодисплеев — это малая величина зоны «комфортного просмотра» (диапазон расстояний от зрителя до дисплея, в котором изображение сохраняет четкость). В среднем она ограничена диапазоном от 3 до 10 метров.</p>
<p>Стереодисплеи сами по себе не имеют прямого отношения к трёхмерной графике. Путаница возникает вследствие использования в западных СМИ термина 3D в отношении как графики, так и устройств, эксплуатирующих стереоэффект, и некорректности перевода при публикации в российских изданиях заимствованных материалов.</p>
<p>Существует также технология WOWvx, с помощью которой можно получить эффект 3D без использования специальных очков. Используется технология лентикулярных линз, которая дает возможность большому количеству зрителей широкую свободу движения без потери восприятия эффекта 3D. Слой прозрачных линз закрепляется перед жидкокристаллическим дисплеем. Этот слой направляет разные картинки каждому глазу. Мозг, обрабатывая комбинацию этих картинок, создает эффект объемного изображения. Прозрачность линзового слоя обеспечивает полную яркость, четкий контраст и качественную цветопередачу картинки.</p>
<p>Существует технология отображения трёхмерного видео на светодиодных экранах.</p>
<h1 class="main-title">Прочие дисплеи</h1>
<p>По состоянию на июнь 2010 года существуют несколько экспериментальных технологий, позволяющих добиться объёмного изображения без стереоскопии. Эти технологии используют быструю развёртку луча лазера, рассеивающегося на частицах дыма (аэрозольный экран) или отражающихся от быстро вращающейся пластины.</p>
<p>Существуют также устройства, в которых на быстро вращающейся пластине закреплены светодиоды.</p>
<p>Такие устройства напоминают первые попытки создать механическую телевизионную развёртку. Видимо, в будущем стоит ожидать появление полностью электронного устройства, позволяющего имитировать световой поток от объёмного предмета в разных направлениях, чтобы человек мог обойти вокруг дисплея и даже смотреть на изображение одним глазом без нарушения объёмности изображения.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0;
font-family: 'Calibri';
font-size: 15px;
color: #fff;
line-height: 1.6;
}
h1 {
margin: 0;
}
*,
*:before
*:after {
box-sizing: border-box;
}
/* Conteiner */
.container {
width: 100%;
max-width: 1980px;
margin: 0 auto;
}
/* Main */
.main {
padding-top: 5%;
width: 100%;
height: 100vh;
background-color: #0e0d0d;
}
.main_inner {
width: 100%;
margin: 0 auto;
}
.main-title {
font-size: 30px;
color: #b64b48;
text-align: left;
padding-top: 20px;
padding-left: 15px;
}
.main-title:after {
content: "";
}
/* Header */
.header {
padding-top: 30px;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.header_inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header_logo {
color: #fff;
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
margin: 0 50px;
}
/* nav */
.nav {
font-size: 15px;
text-transform: uppercase;
}
.nav_link {
display: inline-block;
position: relative;
vertical-align: top;
margin: 0 50px;
color: #a5a5a5;
text-decoration: none;
transition: color .2s linear;
}
.nav_link:after {
content: "";
display: block;
width: 100%;
height: 2px;
opacity: 0;
background-color: #fff;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
transition: opacity .2s linear;
}
.nav_link:hover {
color: #fff;
}
.nav_link:hover:after {
opacity: 1;
}