Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Створення сайту
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
ІКТА
Факультет:
Комп'ютерна інженерія
Кафедра:
ІКТА
Інформація про роботу
Рік:
2015
Тип роботи:
Самостійна робота
Предмет:
Глобальні інформаційні мережі
Група:
КІ 41
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти і науки України
Національний університет “Львівська політехніка”
Кафедра ЕОМ
Звіт
до самостійної роботи з дисципліни
"Глобальні інформаційні мережі"
Тема роботи: Створення сайту.
Мета роботи: Створити HTML сайт.
Виконання роботи
Головною ідея сайту – сторінка музичного гурту Defeater. Сайт містить головну сторінку, інформацію про гурт, галерею, музику та інформацію про автора сайту. На вказаних сторінках були використані різноманітні віджети.
Доменна адреса сайту: http://defeater.pe.hu
/
Рис. 1. Скріншот головної сторінки
HTML код самої невеликої сторінки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" >
<title>Defeater</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyslider.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>
<body>
<!-- .header-->
<header class="header">
<!-- DEFEATER IMAGE -->
<center><a href="http://defeater.me"><img src="images/defeater_logo.gif" align="center" width="600" height="250" alt="Defeater logo"></a></center>
<!-- Menu Navigation -->
<div id="bottom_menu">
<nav>
<ul>
<li><a href="index.html">Головна</a></li>
<li><a href="band.html">Про гурт</a></li>
<li><a href="gallery.html">Галерея</a></li>
<li><a href="music.html">Музика</a></li>
</ul>
</nav>
</div>
<!-- /Menu Navigation -->
</header>
<!-- .content -->
<main class="content">
<!-- SLIDER -->
<div id="content" text-align: "center">
<center>
<div class="slider">
<div class="sliderContent">
<div class="item">
<img src="slider/img1.jpg" alt="" />
</div>
<div class="item">
<img src="slider/img2.jpg" alt="" />
</div>
<div class="item">
<img src="slider/img3.jpg" alt="" />
</div>
<div class="item">
<img src="slider/img4.jpg" alt="" />
</div>
<div class="item">
<img src="slider/img5.png" alt="" />
</div>
<div class="item">
<img src="slider/img6.jpg" alt="" />
</div>
</div>
</div>
</center>
</main>
<!-- .footer -->
<footer class="footer">
<div id='footer' text-align: "bottom"><a href="author.html">Розробив Бакай Костянтин, студент групи КІ-41</a></div>
</footer>
</body>
</html>
Код CSS файлу
nav {
display: block;
position: relative;
}
ul {
width: 400px;
margin: 0 auto;
padding-left: 0;
list-style: none;
overflow: hidden;
}
li {
float: left;
width: 25%;
}
a {
text-decoration: none;
text-align: center;
display: block;
color: #000000;
padding: 0.5em 0;
font-size: 1em;
font-weight: bold;
transition: 0.5s ease-in-out;
font-family: 'Montez', cursive;
}
a:hover {
color: #FF0000;
}
.header {
height: 220px;
}
.content {
padding: 0 0 100px;
}
.footer {
position: fixed; /* Фіксована позиція */
height: 40px;
left: 0; bottom: 0; /* Лівий нижній кут */
padding: 10px; /* Поля навколо тексту */
width: 100%; /* Ширина слою */
}
#content {
width:800px;
margin:100px auto 0;
}
.slider {
float:left;
width:800px;
height:350px;
position:relative;
padding-bottom:26px;
background:url(../gfx/bottom_shadow.png) no-repeat bottom center;
}
.sliderContent {
float:left;
width:800px;
height:350px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(../gfx/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}
.prev {
background-position:0 0;
left:15px;
}
.prev:hover {
background-position:0 -44px;
}
.next {
right:15px;
background-position:-44px 0;
}
.next:hover {
background-position:-44px -44px;
}
.sliderContent .item {
position:absolute;
width:800px;
height:350px;
background:#fff;
}
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(../gfx/bullets.png) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}
Для створення цього сайту було використано безліч доступних сервісів. Сайт розміщенний на безкоштовному хостингу від hostinger.com.ua. Щоб його туди завантажити було використано протокол FTP та клієнт FileZilla. Для задання структури сайту було використано мову HTML, для створення оригінального стилю було використано CSS, а для створення поведінкових скріптів було використано JavaScript. Для створення слайдеру з фотографій було використано бібліотеку jQuery. Було використано інтерактивну карту від Google, відео з YouTube, віджети від Twitter та Facebook.
Висновок
На цій самостійній роботі я створив власний веб-сайт та ознайомився з повним циклом розробки веб-сайтів. У процесі створення я вивчив HTML, CSS та частково JavaScript, ознайомився з різними бібліотеками та віджетами. Створення сайтів є актуальною задачею на сьогодні. Проте деякі інструменти є досить жахливими. В порівнянні в Android Studio для верстки UI програмісту доступна ціла інтелектуальна система, яка може перевіряти помилки, давати динамічні підказки та моментально рендерити результат у іншому вікні. Таких можливостей немає під час створення веб-сайту за допомогою HTML та CSS, що викликає певні складнощі.
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора