Вы находитесь на странице: 1из 8

Министерство образования и науки Украины

Государственное высшее учебное заведение

«Приазовский государственный технический университет»

Кафедра компьютерных наук

Лабораторная работа №3

ВЕРСТКА МАКЕТА СТРАНИЦЫ ПРИ ПОМОЩИ ГОТОВОГО


МАКЕТА

Выполнил:
студент КМ-16
Малышев Алексей
Принял:
Ст.преподаватель
Сергиенко А. В.

Мариуполь 2020
Вариант №2

Цель работы – получение умений и навыков работы с типовыми


шаблонами и верстка макета страницы на их основе.

Задание 1.

Ознакомиться с примерами и выполнить верстку типового макета по


варианту. Номер варианта выбрать согласно номеру в аудиторном журнале.

фиксированный
2 двухколоночный
макет;
Задание 2

Проанализировать интернет и привести примеры сайтов, выполненных по


всем приведенным в теории макетам.

Листинг:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>LR 3</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<header class="wrapp">

<h1>фиксированный двухколоночный макет</h1>

</header>

<div class="wrapp main">

<section class="column1">

<nav>

<ul>
<li><a href="#">Navigation1</a></li>

<li><a href="#">Navigation2</a></li>

<li><a href="#">Navigation3</a></li>

<li><a href="#">Navigation4</a></li>

<li><a href="#">Navigation5</a></li>

<li><a href="#">Navigation6</a></li>

<li><a href="#">Navigation7</a></li>

</ul>

</nav>

</section>

<div class="column2">

<article>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.


Illum cumque architecto, perferendis hic minus pariatur. Ipsa perferendis accusamus cumque dolor,
necessitatibus vero libero id, quam et asperiores quae quaerat, saepe.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.


Nulla harum doloremque praesentium voluptas dolorum vero odit? Iure ea maxime accusamus
exercitationem accusantium totam, cumque libero, sint magni praesentium debitis natus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.


Illum culpa excepturi hic nisi libero iusto, optio placeat minima, amet aspernatur quia facere commodi
voluptatum mollitia fugit, doloremque tenetur? Quisquam, hic.</p>

</article>

</div>

</div>

</body>

</html>

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,


b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

font-family: Verdana;

vertical-align: baseline;

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

body {

line-height: 1;

ol, ul {

list-style: none;

blockquote, q {

quotes: none;

}
blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

table {

border-collapse: collapse;

border-spacing: 0;

.wrapp

width: 1000px;

margin: auto;

header.wrapp

margin-bottom: 40px;

border: 1px solid #000;

border-top: none;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

header.wrapp h1

text-align: center;

font-size: 30px;

text-transform: capitalize;
padding: 20px 0px;

.main

display: flex;

flex-direction: row;

justify-content: center;

align-items: baseline;

.column1

width: 250px;

margin-right: 50px;

.column2

width: 700px;

.main nav

display: block;

padding: 20px 0px 20px;

padding-left: 20px;

border-right: 3px dashed #000;

}
.main nav ul

list-style-type: circle;

.main nav li

margin-bottom: 20px;

.main nav li a

color: #343434;

text-decoration: none;

display: inline-block;

border-bottom: 1px dotted #000;

.main nav li:hover a

border-bottom: 1px dotted transparent;

.column2 article p

font-size: 18px;

width: 80%;

margin: auto;

margin-bottom: 30px;

text-align: justify;

}
Примеры сайтов:

1. Фиксированный макет: http://htmlbook.ru/


2. Резиновый макет: https://webformyself.com/primery-verstki-sajta/
3. Эластичный макет: http://v1.jontangerine.com/silo/css/elastic-layout/
4. Адаптивный макет: https://itchief.ru/bootstrap/responsive-website-design
5. Комбинированный макет: https://mariupol.itstep.org/about_academy
6. Колонки одинаковой высоты:
https://www.vanseodesign.com/blog/demo/equal-height-columns/faux-
columns.php
7. Резиновый трехколоночный макет:
https://itchief.ru/bootstrap/responsive-website-design
8. Фиксированный трёхколоночный макет: http://htmlbook.ru/
9. Фиксированный двухколоночный макет:
https://webref.ru/course/position/fixed
10.Макет из трёх колонок: http://htmlbook.ru/
11.Макет из двух колонок: https://webformyself.com/primery-verstki-sajta/

Вывод: Я получил умения и навыки работы с типовыми шаблонами и


сверстал макет страницы на их основе.