Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Основні етапи розробки веб-сайту
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
ІКТА
Факультет:
КН
Кафедра:
Не вказано
Інформація про роботу
Рік:
2014
Тип роботи:
Лабораторна робота
Предмет:
Глобальні інформаційні мережі
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти та науки України
Національний університет «Львівська політехніка»
/
ЗВІТ
З лабораторної роботи №8
з дисципліни:«Глобальні інформаційні мережі»
на тему:
«Основні етапи розробки веб-сайту»
Львів 2014
Порядок роботи
Обрати тему сайту.
Визначитися з колірною гамою, стилем, логічною та фізичною структурою сайту.
Зверстати шаблонну сторінку, перевірити цілісність структури, наявність всіх основних блоків сторінки (окремі модульні блоки закоментувати), правильність посилань.
За шаблонною сторінкою створити решта сторінок, об'єднати їх навігацією
Додати до сторінок сервіси згідно вимог.
Розмістити сайт в Інтернеті.
Назва розробленого сайту:
de:coded. Середовище Проривних Рішень
Адреса Розміщення:
http://yuriybishko.comule.com/2014/ru/
Скрін Головної сторінки:
/
HTML код самої невеликої сторінки
<!DOCTYPE html>
<html lang="ua" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>de:coded | Головна</title>
<link href="..//styles/style.css" rel="stylesheet" type="text/css" />
<link href="..//img/icons/decoded_icon.ico" rel="shortcut icon">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin' rel='stylesheet' type='text/css'>
<script src="/resources/libs/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/resources/libs/gen_validatorv31.js" type="text/javascript"></script>
<script src="/resources/js/script.js" type="text/javascript"></script>
</head>
<body class="indexBody">
<div class="siteHolder">
<!--DIV для задання стилю сторінці з відповідними відступами-->
<!--Хедер-->
<header class="logo" style= "right: 30px;">
<img src="../img/logo.png" width= "190"alt="de:coded"/>
<div class="slogan" >Люди. Технології. Рішення.</div>
</header>
<!--Навігація-->
<nav class="lang"><a href="../ru/index.php">Головна</a> | <a href="../ru/gallery.php">Галерея</a> | <a href="../ru/history.php">Історія</a> | <a href="../ru/video.php">Відео</a> | Контакти</nav>
<!--Секція, контент-->
<section style="text-align: center; padding-top: 10%; padding-bottom: 10%;">
<h2>Ми на карті</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2573.3826635127857!2d24.029473999999986!3d49.83526699999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473add6f5adab153%3A0x559abeee92b238ae!2z0LLRg9C7LiDQmtCw0LvRltGH0LAg0JPQvtGA0LAsIDUsINCb0YzQstGW0LIsINCb0YzQstGW0LLRgdGM0LrQsCDQvtCx0LvQsNGB0YLRjA!5e0!3m2!1suk!2sua!4v1417966116813" width="600" height="450" frameborder="0" style="border:0"></iframe>
</section>
</div>
<!--Футер-->
<footer class="footerContacts" style="
margin-left: 10%; margin-bottom: 5%">
<h3>Контакти</h3>
<p><span lang="ru" xml:lang="ru">Треба хелп? </span><span lang="en-US" xml:lang="en-US"> <a href="mailto:F1@decoded.org.ua" target="_blank">yuriy.bishko@decoded.org.ua</a></span><br/>
<span lang="ru" xml:lang="ru">Ще: </span><span><a href="http://blog.decoded.org.ua/">наш блог</a> та <a href="http://vkontakte.ru/club2004755">група Вконтакті</a></span></p>
<a href="https://twitter.com/BUBLIK_LviV" class="twitter-follow-button" data-show-count="false">Follow @BUBLIK_LviV</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</form>
</footer>
</body>
</html>
Код CSS Файлу
html, body {
height: 100%;
}
body {
background-color: #eeeeee;
color: #666666;
font-family: 'Myriad Pro',arial,serif;
font-size: 14px;
height: 100%;
margin: 0;
padding: 0;
}
h3, body.inner .footerHolder h3 {
color: #0088cc;
font-size: 18px;
margin: 10px 0;
padding-left: 0;
text-shadow: none;
font-weight: inherit;
}
a {
color: #22C4F2;
}
a img {
border: medium none;
}
a:hover {
color: #DC88FF;
}
.siteHolder {
background-position: center bottom;
background-repeat: no-repeat;
min-height: 20%;
position: relative;
}
body.inner .siteHolder {
background-image: none;
min-height: 100%;
position: relative;
}
.contentHolder {
padding-bottom: 302px;
}
.headerHolder {
background-color: #eeeeee;
background-position: center top;
background-repeat: no-repeat;
height: 584px;
}
.logo {
height: 65px;
position: inherit;
float: right;
width: 195px;
top: 30px;
}
.lang {
font-size: 11px;
height: 30px;
position: absolute;
left: 30px;
top: 40px;
width: 220px;
}
.indexBody .headerContent {
height: 429px;
margin: 0 auto;
position: relative;
width: 955px;
}
.twitterHolder {
background-image: url("../img/twitt_bg1.png");
height: 153px;
overflow: hidden;
}
.twitterContent {
background-image: url("../img/twitt_bg2.png");
background-repeat: no-repeat;
height: 120px;
margin: 0 auto;
padding-top: 30px;
width: 955px;
}
.twitterTitle {
float: left;
height: 115px;
position: relative;
width: 175px;
}
.twitterTitle h1 {
color: #CCCCCC;
margin: 0;
}
.twtr-widget .twtr-tweet-wrap {
font-family: 'Myriad Pro',arial,serif;
overflow: hidden;
padding: 6px 8px;
width: 230px;
}
#twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline {
background: none repeat scroll 0 0 transparent !important;
}
#twtr-widget-1 .twtr-doc, #twtr-widget-1 .twtr-hd a, #twtr-widget-1 h3, #twtr-widget-1 h4, #twtr-widget-1 .twtr-popular {
color: #FFFFFF !important;
}
#twtr-widget-1 .twtr-bd, #twtr-widget-1 .twtr-timeline i a, #twtr-widget-1 .twtr-bd p {
line-height: 15px !important;
}
.twtr-widget .twtr-tweet-wrap {
overflow: hidden;
padding: 0 !important;
}
.twtr-widget .twtr-tweet {
border-bottom: 1px dotted #DDDDDD;
float: left;
overflow: hidden;
width: 250px;
}
.twtr-widget a {
color: #3E3E3E;
text-shadow: none;
}
.twtr-tweet-wrap {
height: 130px;
}
.mainContentHolder {
min-height: 433px;
}
h1 {
color: #0088cc;
font-family: 'Myriad Pro',arial,serif;
font-size: 48px;
font-weight: inherit;
}
ul {
margin: 0;
padding: 0;
}
.indexBody ul li {
display: block;
}
.footerContacts {
margin-top:50px;
width: 370px;
}
.footerContacts span {
color: #B1B1B1;
font-size: 12px;
line-height: 16px;
}
.twitterAdd {
bottom: 33px;
font-size: 12px;
position: absolute;
}
.twitty {
position: absolute;
right: 0;
top: 4px;
}
.twtr-widget .twtr-hd, .twtr-widget .twtr-ft {
display: none;
}
body.inner {
background-color: #000000;
background-image: url("../img/skyinner.jpg");
background-position: center top;
background-repeat: no-repeat;
}
body.intel h1, body.intel h2, body.intel h3 {
color: #FEF88C;
text-shadow: 0 0 0.5em #836300, 0 0 2em #836300;
}
body.inner h1 {
font-size: 60px;
}
body.inneSr h2 {
font-size: 32px;
}
body.inner h3 {
font-size: 20px;
}
body.inner h3, body.inner h4 {
padding-left: 20px;
}
body.inner p {
font-size: 14px;
letter-spacing: 0.05em;
line-height: 170%;
padding-left: 20px;
}
body.inner ul {
border-top: 1px dotted #222222;
margin-left: 36px;
}
body.inner ul li {
padding: 6px 0;
}
Технології та сервіси, які були застосовані
В лабораторній роботі було використано технологію HTML5 а також сервіси від Google та Яндекс API.
Висновок: Вміння створювати сайту сьогодні є дуже популярним. Адже, все більший попит є на розробку макету сайту та його верстку. Таке вміння дозволяє отримати великий досвід, і в майбутньому може бути хорошим пунктом у резюме. А як мінімум, це не погані гроші.
03.02.2015 19:02-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора