У роботі розглядаються
- Створення вебсайтів
- HTML та CSS
- JavaScript та jQuery
- Веброзробка
- Хостинг та FTP
- Інтерактивні віджети
Звіт до самостійної роботи з дисципліни "Глобальні інформаційні мережі" - Створення сайту
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Інститут комп’ютерних наук та інформаційних технологій
Факультет:
Комп'ютерна інженерія
Кафедра:
Кафедра електронних обчислювальних машин
Інформація про роботу
Рік:
2015
Тип роботи:
Самостійна робота
Предмет:
Глобальні інформаційні мережі
Група:
КІ-41
Коротко про документ
Про що ця робота
Звіт присвячено створенню вебсайту музичного гурту за допомогою HTML, CSS та JavaScript. У роботі описано процес верстки, використання бібліотеки jQuery та розміщення сайту на хостингу.
Зміст і розділи
- Виконання роботи
- HTML код сторінки
- Код CSS файлу
- Висновок
Для кого:Студенти та викладачі вищих навчальних закладів технічного профілю
Викладачі:Юрчак І. Ю.
Ключові поняття
вебсайтHTMLCSSJavaScriptjQueryсумісністьхостингFTPFileZilla
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти і науки України
Національний університет “Львівська політехніка”
Кафедра ЕОМ
Звіт
до самостійної роботи з дисципліни
"Глобальні інформаційні мережі"
Тема роботи: Створення сайту.
Мета роботи: Створити 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">
</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, що викликає певні складнощі.
Допоможи студентському архіву
Ми допомогли тобі — допоможи наступному студенту
Оголошення від адміністратора
Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!