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

Министерство образования, культуры и просвещения

Республики Молдова
Технический Университет Молдовы
Факультет Электроники и Телекоммуникаций
Департамент Телекоммуникаций

Отчет
По лабораторной работе 6

Предмет: “Специализированные программные


приложения ”

Тема: ” Модернизация внутренних страниц


сайта”

Выполнил:
Ст. гр. IMTC-182
Ботнарь Андрей
Проверил:
Преподаватель
Алексей А

Кишинев 2021
Цели Работы:

1. Усовершенствование внутренних страниц сайта


2. Насыщение фотографиями главной страницы
3. Изменение стилей внутренних страниц
4. Заполнение внутренних страниц контентом
5. Усовершенствование страницы контактов
1)Добавление фотографий на главную страницу сайта

<section class="teaser col-1-3"><!-- Секция Футбол-->

<a href="football.html"><h3><strong>Футбол</strong></h3></a>

<img src="photos/home/battle2.jpg">

<p>Самый большой ассортимент экипировки для футболистов</p>

</section>

2)Стилизация изображений на главной странице

.teaser img{

border-radius: 5px;

display: block;

margin-bottom: 22px;

width: 330px;

height: 200px;

3)Добавление фотографий на странички футбола, баскетбола и хоккея

<aside class="col-1-3">

<ul>

<li><img src="photos/form.jpg" ></li>

</ul>

</aside>

4)Стилизация фотографий на внутренних страницах

img{

width: 250px;

height: 175px;

border-radius: 22px;
}

5)Оформление странички контактов (добавление секций и контейнеров с


соответствующими классами)

<section class="row">

<div class="grid">

<section class="tovary">

<div class="col-2-3">

<h2>Форма</h2>

<p>Невероятно огромный ассортимент баскетбольной формы позволяет


подобрать ее каждому индивидуально. У нас вы найдете форму всех
размеров, начиная от детской и заканчивая экземплярами для
спортсменов.</p>

</div><!--

--><aside class="col-1-3">

<ul>

<li><img src="photos/form2.jpg" ></li>

</ul>

</aside>

…………..

</div>

</section>

6)Оформление странички контактов

6.1)Добавление на страничку контактов адреса и тедефонов

<section class="col-2-3">

<h2>Адрес</h2>

<p>Бульвар Дачия 45, Кишинев 2002, Республика Молдова</p>

<h2>Офис Магазина в Кишиневе</h2>


<p>E-mail: sportmaster@dellivery.com<br>

Тел: +373 22 23-77-11 / Факс: +373 22 23-78-32</p>

<h2>Офис Магазина в Унгенах</h2>

<p>E-mail: sportmaster@dellivery.com<br>

Тел: +373 36 36-70-25 / +373 36 23-71-85</p>

</section>

6.2)Создание онлайн заявки

<!--

--><form class="col-1-3" action="#" method="post">

<fieldset class="contact-group">

<label style="color: black">

Имя Фамилия

<input type="text" name="name" placeholder="Пример Константин Петров"


required>

</label>

<label style="color: black">

Почтовый адрес

<input type="email" name="email" placeholder="Пример


www.petrov.konstantin@mail.ru" required>

</label>

<label style="color: black">

Номер телефона
<input type="tel" name="tel" placeholder="Пример +37376897549" required>

</label>

<label style="color: black">

Сообщение

<textarea name="message"></textarea>

</label>

</fieldset>

6.3)Стилизация данной заявки

/*

========================================

Contacts

========================================

*/

form {

margin-bottom: 22px;

input,

textarea {

font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial,
sans-serif;

.contact-group label {

color: #648880;

cursor: pointer;
font-weight: 400;

.contact-group input,

.contact-group textarea {

border: 1px solid #c6c9cc;

border-radius: 5px;

color: #888;

display: block;

margin: 5px 0 27px 0;

padding: 5px 8px;

.contact-group input,

.contact-group textarea {

width: 100%;

.contact-group textarea {

height: 78px;

7)Добавление карты с местом расположения на страничку с контактами

<section class="map-utm">

<div class="col-1-3">

<h2>Спортмастер</h2>

<p>Бульвар Дачия 45,<br>Кишинев 2002, Республика Молдова</p>

<p><a href="index.html" style="color: black">Спортмастер</a> <br> (022) 23-


77-11</p>

</div><!--
--><iframe class="col-2-3"src="https://www.google.com/maps/embed?pb=!1m18!
1m12!1m3!1d2722.0041997279236!2d28.864834515128834!
3d46.9812521389598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x40c97946266e1fbd%3A0x5347d1440d4fe9ee!
2zQnVsZXZhcmR1bCBEYWNpYSA0NSwgQ2hpyJlpbsSDdSwg0JzQvtC70LTQ
sNCy0LjRjw!5e0!3m2!1sru!2s!4v1618849113552!5m2!1sru!2s" width="600"
height="264" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</section>

8)Стилизация данной карты

/*

========================================

Location

========================================

*/

.map-utm {

margin-bottom: 66px;

Код HTML для странички контактов

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Контакты</title>

<link rel="stylesheet" type="text/css" href="main.css"><!--Привязка CSS


документа к HTML-->
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">

</head>

<body>

<header class="primary-header container group">

<section class="container">

<a href="index.html"><h1 class="logo"


><strong>Спортмастер</strong></h1></a>

</section>

<br>

<nav class="nav primary-nav">

<ul>

<li><a href="index.html">Домой</a></li><!--

--><li><a href="football.html">Футбол</a></li><!--

--><li><a href="hockey.html">Хоккей</a></li><!--

--><li><a href="basketball.html">Баскетбол</a></li><!--

--><li><a href="contacts.html">Контакты</a></li>

</ul>

</nav>

</header>

<section class="row">

<div class="grid">

<section class="col-2-3">

<h2>Адрес</h2>

<p>Бульвар Дачия 45, Кишинев 2002, Республика Молдова</p>

<h2>Офис Магазина в Кишиневе</h2>


<p>E-mail: sportmaster@dellivery.com<br>

Тел: +373 22 23-77-11 / Факс: +373 22 23-78-32</p>

<h2>Офис Магазина в Унгенах</h2>

<p>E-mail: sportmaster@dellivery.com<br>

Тел: +373 36 36-70-25 / +373 36 23-71-85</p>

</section><!--

--><form class="col-1-3" action="#" method="post">

<fieldset class="contact-group">

<label style="color: black">

Имя Фамилия

<input type="text" name="name" placeholder="Пример Константин Петров"


required>

</label>

<label style="color: black">

Почтовый адрес

<input type="email" name="email" placeholder="Пример


www.petrov.konstantin@mail.ru" required>

</label>

<label style="color: black">

Номер телефона

<input type="tel" name="tel" placeholder="Пример +37376897549" required>

</label>
<label style="color: black">

Сообщение

<textarea name="message"></textarea>

</label>

</fieldset>

<input class="btn btn-default" type="submit" name="submit"


value="Отправить">

</form>

<section class="map-utm">

<div class="col-1-3">

<h2>Спортмастер</h2>

<p>Бульвар Дачия 45,<br>Кишинев 2002, Республика Молдова</p>

<p><a href="index.html" style="color: black">Спортмастер</a> <br> (022) 23-


77-11</p>

</div><!--

--><iframe class="col-2-3"src="https://www.google.com/maps/embed?pb=!1m18!
1m12!1m3!1d2722.0041997279236!2d28.864834515128834!
3d46.9812521389598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x40c97946266e1fbd%3A0x5347d1440d4fe9ee!
2zQnVsZXZhcmR1bCBEYWNpYSA0NSwgQ2hpyJlpbsSDdSwg0JzQvtC70LTQ
sNCy0LjRjw!5e0!3m2!1sru!2s!4v1618849113552!5m2!1sru!2s" width="600"
height="264" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</section>

</div>
</section>

<footer class="primary-footer container group">

<small>&copy; Спортмастер | Кишинев 2021</small><!--Авторское право-->

<nav class="nav primary-nav">

<ul>

<li><a href="index.html">Домой</a></li><!--

--><li><a href="football.html">Футбол</a></li><!--

--><li><a href="hockey.html">Хоккей</a></li><!--

--><li><a href="basketball.html">Баскетбол</a></li><!--

--><li><a href="contacts.html">Контакты</a></li>

</ul>

</nav>

</footer>

</body>

</html>

Код CSS

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126

License: none (public domain)

*/

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;

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;

/*

========================================

Custom styles

========================================

*/

body {

background:#556B2F;

color: #888;

font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial,
sans-serif;

}
h1, h2, h3, h4 {

color: #000000;

h1 {

font-size: 36px;

line-height: 44px;

h2 {

font-size: 24px;

line-height: 44px;

h3 {

font-size: 21px;

h4 {

font-size: 18px;

h5 {

color: #a9b2b9;

font-size: 14px;

font-weight: 400;

text-transform: uppercase;

strong {

font-weight: 400;
}

cite, em {

font-style: italic;

/*

========================================

Links

========================================

*/

a{

color: #D3D3D3;

text-decoration: none;

a:hover {

color: #a9b2b9;

pa{

border-bottom: 1px solid #dfe2e5;

p{

color: #000000;

.primary-header a,
.primary-footer a {

color: #D3D3D3;

.primary-header a:hover,

.primary-footer a:hover {

color: #F5F5DC;

/*

========================================

Grid

========================================

*/

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

.container,

.grid {

margin: 0 auto;

width: 1200px;
}

.container {

padding-left: 30px;

padding-right: 30px;

.col-1-3 {

width: 33.33%;

.col-2-3 {

width: 66.66%;

.col-1-3,

.col-2-3 {

display: inline-block;

vertical-align: top;

.grid,

.col-1-3,

.col-2-3 {

padding-left: 15px;

padding-right: 15px;

/*

========================================

Clearfix
========================================

*/

.group:before,

.group:after {

content: "";

display: table;

.group:after {

clear: both;

.group {

clear: both;

*zoom: 1;

/*

========================================

Rows

========================================

*/

.row,

.row-alt{

min-width: 1200px;

.row {
background: #8FBC8F;

padding: 66px 0 44px 0;

.row-alt {

background:#F5F5DC;

background: -webkit-linear-gradient(to right, #808000, #98FB98);

background: -moz-linear-gradient(to right, #808000, #98FB98);

background: linear-gradient(to right, #808000, #98FB98);

padding: 44px 0 22px 0;

/*

========================================

Typography

========================================

*/

h1, h3, h4, h5, p {

margin-bottom: 22px;

/*

========================================

Buttons

========================================

*/
.btn {

border-radius: 5px;

color: #000000;

cursor: pointer;

display: inline-block;

font-weight: 400;

letter-spacing: .5px;

margin: 0;

text-transform: uppercase;

.btn-alt {

border: 1px solid #fff;

padding: 10px 30px;

border-radius: 10px;

.btn-alt:hover {

background: #000000;

color: #648880;

/*

========================================

Home

========================================

*/
.hero {

color: #F5F5DC;

line-height: 44px;

padding: 22px 80px 66px 80px;

text-align: center;

.hero h2 {

font-size: 36px;

.hero p {

font-size: 24px;

font-weight: 100;

.teaser a:hover h3 {

color: #F5F5DC;

/*

========================================

Primary header

========================================

*/

.logo {
border-top: 4px solid #F5F5DC;

float: left;

font-size: 39px;

font-weight: 100;

letter-spacing: .5px;

line-height: 44px;

padding: 40px 0 22px 0;

text-transform: uppercase;

.tagline {

margin: 66px 0 22px 0;

text-align: right;

.primary-nav {

font-size: 14px;

font-weight: 400;

letter-spacing: .5px;

text-transform: uppercase;

/*

========================================

Primary footer

========================================

*/
.primary-footer {

color: #FFFFFF;

font-size: 14px;

padding-bottom: 44px;

padding-top: 44px;

.primary-footer small {

float: left;

font-weight: 400;

/*

========================================

Navigation

========================================

*/

.nav {

text-align: right;

.nav li {

display: inline-block;

margin: 0 10px;

vertical-align: top;

}
.nav li:last-child {

margin-right: 0;

/*

========================================

Tovary

========================================

*/

.tovary {

margin-bottom: 44px;

img{

width: 250px;

height: 175px;

border-radius: 22px;

.teaser img{

border-radius: 5px;

display: block;

margin-bottom: 22px;

width: 330px;

height: 200px;

}
/*

========================================

Contacts

========================================

*/

form {

margin-bottom: 22px;

input,

textarea {

font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial,
sans-serif;

.contact-group label {

color: #648880;

cursor: pointer;

font-weight: 400;

.contact-group input,

.contact-group textarea {

border: 1px solid #c6c9cc;

border-radius: 5px;

color: #888;

display: block;

margin: 5px 0 27px 0;

padding: 5px 8px;


}

.contact-group input,

.contact-group textarea {

width: 100%;

.contact-group textarea {

height: 78px;

/*

========================================

Location

========================================

*/

.map-utm {

margin-bottom: 66px;

}
Рис. 1 Главная страница сайта

Рис. 2 Футбольный раздел


Рис. 3 Страничка контактов

Вывод!
При выполнении данной лабораторной работы я заполнил внутренние
страницы сайта контентом, а так же полностью простилизировал данные
страницы. Так же я полностью оформил страницу контактов, а именно я
добавил адреса, телефоны и онлайн заявку. Так же я добавил карту с местом
расположения магазина на страницу контактов.