Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Розробка Веб-сайту
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Не вказано
Факультет:
КН
Кафедра:
Кафедра ЕОМ
Інформація про роботу
Рік:
2014
Тип роботи:
Лабораторна робота
Предмет:
Глобальні інформаційні мережі
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти і науки України
Національний університет «Львівська політехніка»
Кафедра ЕОМ
/
Лабораторна робота №8
з предмету:
«Глобальні інформаційні мережі»
на тему:
«Розробка Веб-сайту»
Мета роботи: Ознайомитися і розробити повноцінний веб-сайт.
Порядок роботи:
1. Назва розробленого сайту
2. Адреса розміщення
3. Скрін головної сторінки.
4. HTML код самої невеликої сторінки.
5. Код CSS файлу.
Хід роботи:
1. Назва розробленого сайту: Життя Серед Дикої Природи
2. Адреса розміщення: http://wildlife.esy.es/
3. Скрін головної сторінки.
/
4. HTML код самої невеликої сторінки.
<!DOCTYPE html><!-- Тип документа -->
<html><!-- Тег визначає, що це документ html -->
<head><!-- Службова інформація для браузера -->
<meta name="keywords" content="" /><!-- Ключлві слова -->
<meta name="description" content="" /><!-- Опис цього документа -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><!-- Кодування -->
<title>Життя Серед Дикої Природи</title><!-- Заголовок на вкладці -->
<link rel="shortcut icon" href="images/icon.jpg"/> <!-- Підключення Іконки -->
<link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" /><!-- Підключений файл, цей файл зберігає таблицю стилів CSS,, вказується пристрій(екран монітору)-->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css"/> <!--Підключення стилів слайдера -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!--Підключення бібліотеки jquery, через інтернет -->
<script src="js/slides.js"></script> <!--Підключення ява скріп код -->
<script>
$(function(){
$("#slides").slides({
responsive: true
});
});
</script>
<style>
#slides .slidesNext {
right:-35px;
left:auto;
}
#slides .slidesPrevious {
left:-35px;
}
</style>
</head>
<body> <!-- Інформація, яка відображається на сторінці -->
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><a href="http://wildlife.esy.es/index.html">Життя Серед</a></h1>
<h1><a href="http://wildlife.esy.es/index.html">Дикої Природи</a></h1>
<p>Інструкція по виживанню</p>
</div>
</div>
</div><!-- end #header -->
<div class="container">
<div id="menu-wrapper"class="container">
<ul id="menu">
<li class="current_page_item"><a href="index.html"><span>Головна</span></a></li><!-- http://wildlife.esy.es/index.html -->
<li><a href="book.html" ><span>Книга</span></a></li>
<li><a href="campaign.html"><span>Походи</span></a></li>
<li><a href="author.html"><span>Автор</span></a></li>
</ul>
</div><!-- end #menu -->
<div id="container" class="container">
<div id="slides">
<img src="images/01.jpg" width="980" height="300" alt="Slide 1"/>
<img src="images/02.jpg" width="980" height="300" alt="Slide 1"/>
<img src="images/03.jpg" width="980" height="300" alt="Slide 2"/>
<img src="images/04.jpg" width="980" height="300" alt="Slide 3"/>
<img src="images/05.jpg" width="980" height="300" alt="Slide 4"/>
<img src="images/06.jpg" width="980" height="300" alt="Slide 5"/>
</div>
</div>
<div id="page"class="container">
<div id="content">
<h2 class="title">Дорогий друже!</h2>
<p>За час існування людства багато що змінилося. Виросли міста, удосконалилася техніка. Але світ природи залишився таким, яким був. Зірки, які допомагають нам орієнтуватися, залишилися на своїх місцях; сонце і раніше встає на сході і сідає на заході; тварини залишають ті ж самі сліди, що й раніше, а вогнище горить настільки ж яскраво. Наш борг - розуміти і берегти природу і всі живі істоти в ній, вміти протистояти стихії і мати мужність слідувати туди, куди кличе нас дарований Господом дух пригод, куди б він нас не привів. У ці книжці, я упорядкував загальні знання і адаптував багато методик, які використовуються при підготовці до походу чи в екстремальних ситуаціях дикої природи. Ніколи не знаєш, які труднощі можуть тебе чекати і яка запекла боротьбі може точитися в дикі природі за власне життя. Тому освоєння цих навичок і засвоєння знань, допоможе завжди бути готовим до непередбачуваних ситуацій. Бо життя, по суті своїй, вимагає постійної готовності до подолання труднощів. Тому завжди потрібно тренуватися і готуватися до нових пригод, вчиться працювати в команді, розуміти природу і освоювати навички, які допоможуть вижити в будь-яких умовах, словом, готуватися до цього, а також до іншого життя. Ми знаходимо мир у душі за допомогою віри, а віра вселяє в нас мужність, що допомагає вийти за межі комфортних умов існування. Бо все, до чого прагне людина, якраз і досягається виходом за межі цього комфорту, бажанням ризикнути; йти до своєї мрії, долаючи труднощі; любити, перемагаючи біль; сподіватися, відкидаючи сумніви, і жити сміливо, незважаючи на страх. У житті мандрівника головне - це бути разом, тому що разом ми стаємо сильнішими. І ще - це радіти, боротися, мріяти і йти вперед, беручи з собою в походи тих, кого ти любиш. Отже, вперед, друзі! Життя - це пригода, в яку треба кидатися без жодного страху. Благослови вас Бог.</p>
</div>
<div id="splash"><img src="images/g01.jpg" width="400" height="600"/></div>
<div style="clear: both;"> </di </div><!-- end #page -->
</div>
<div id="footer">
<p><a href="http://wildlife.esy.es">© 2014 Життя Серед Дикої Природи | Магера Павло</a></p>
</div><!-- end #footer -->
</body>
</html>
5. Код CSS файлу.
body {
margin: 0;
padding: 0;
background: #FFFFFF; /* Колір заднього фону (білий))*/
font-family: Arial, Helvetica, sans-serif; /* Шрифш */
font-size: 14px; /* Розмір літер тексту */
color: #000000; /* Колір тексту (чорний))*/
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
text-transform: lowercase; /* Регістри символів (великий,малий)) */
font-weight: 400;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.4em;
}
h3 {
font-size: 1.6em;
}
p {
margin-top: 0;
line-height: 140%; /* Відстань між рядочками в тексті*/
}
a {
text-decoration: none;
}
/* Header */
#header-wrapper {
height: 240px;/* Ширина шапки */
background: #3A3A3A; /* Фон */
margin-bottom: 30px;
}
#header {
width: 960px;/* Текст на шапці */
height: 240px;
margin: 0 auto;
}
/* Logo */
#logo {
width: 980px;
height: 100px;
margin: 0px auto;
padding: 40px 0px 0px 0px;
color: #8AE62E; /*222Колір нижніж слів на шапці*/
text-decoration: none;
}
#logo h1, #logo p {
display: block;
margin: 0px;
padding: 0px;
text-transform: lowercase;/* Регістри символів (великий,малий)) */
text-decoration: none;
}
#logo h1 {
letter-spacing: -2px; /* Відстань між буквами */
text-align: center;
text-transform: none;/* Регістри символів (великий,малий)) */
font-size: 60px;/* Розмір вер.літер */
text-decoration: none;
}
#logo h1 a {
color: #99FF33; /*111Колір вер.слів на шапці*/
text-decoration: none;
}
#logo p {
margin-top: 0px;
text-align: center;
font-family: 'Abel', sans-serif;
font-size: 25px;/* Розмір ниж.літер */
text-decoration: none;
}
/* Menu */
#menu-wrapper {
width: 980px;
height: 60px;
margin: 0px auto;
padding: 0px;
background: #99FF33; /*333Колір меню фону*/
border-radius: 10px;
}
#menu {
margin: 0;
padding: 0px 150px; /* Відступ зліва кнопок*/
list-style: none;
line-height: 60px;
letter-spacing: -1px;
text-decoration: none;
text-transform: lowercase;
text-shadow: 2px 2px 2px rgba(0,0,0,.3);
font-size: 24px;
font-weight: normal;
color: #FFFFFF;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
float: left;
height: 60px;
margin: 0px;
color: #3A3A3A;/*331Колір літер на меню*/
}
#menu .current_page_item a {
text-shadow: 2px 2px 2px rgba(0,0,0,.3);
background: #7CCF29; /* Колір активної сторінки*/
}
#menu a:hover {
background: #8AE62E;/*Колір коли наводиш*/
text-decoration: none;
text-shadow: 2px 2px 2px rgba(0,0,0,.3);
color: #FFFFFF;
}
#menu span {
padding: 0px 50px; /*Ширина фону коли нафодиш*/
}
#menu > li {
}
#menu > li.active {
background: #378C32;
color: #FFFFFF;
}
/* Page */
#page {
width: 980px; /* Вістань від лівого краю*/
margin: 0px auto; /* Автоматично визначеється браузером */
position: relative;
top: 50px;
}
/* Content */
#content {
float: left; /* Обтікання по правому краю */
width: 500px; /* Ширина блоку */
padding: 0px 50px 50px 10px; /* зверху, справа, знизу, зліва*/
text-align: justify; /*Вирівнювання тесту, по ширині*/
}
.title {
letter-spacing: -2px;/* відстань між літерами */
text-transform: none;/* Регістри символів (великий,малий)) */
font-size: 50px;/* Росзмір букв */
color: #3A3A3A; /*444Колір заголовку*/
}
#content2 {
float: left; /* Обтікання по правому краю */
width: 980px; /* Ширина блоку */
padding: 0px 0px 50px 0px;/* зверху, справа, знизу, зліва*/
text-align: justify;/*Вирівнювання тесту, по ширині*/
}
.title2 {
letter-spacing: -2px;/* відстань між літерами */
text-transform: none;/* Регістри символів (великий,малий)) */
font-size: 50px;/* Росзмір букв */
color: #3A3A3A; /*444Колір заголовку*/
margin-top: 25px;
}
/* Footer */
#footer {
height: 80px;
background: #3A3A3A;
position: relative;
top: 25px;
}
#footer p {
margin: 0;
padding-top: 20px; /*Відстань від верхнього елементу */
text-align: center; /* Розміщення слів по центру */
text-transform: none;/* Регістри символів (великий,малий)) */
font-size: 14px;
}
#footer a {
color: #99FF33;/*555*/
}
#splash { /*Фото*/
width: 980px;
margin: 0px auto;
margin-top: 25px;
padding: 0px 0px 10px 0px;/* зверху, справа, знизу, зліва*/
}
Висновок: На цій лабораторні роботі я навчився створювати сайт. Важливо мати вміння створювати сайт, адже зараз кожна організація, фірма, т.п. має сайт. Вони спрямовані на різну рекламну, освітню діяльність. Ці вміння можуть дати хороші рекомендації і заробіток.
28.02.2015 15:02-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора