ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 10.05.2024
Просмотров: 64
Скачиваний: 0
СОДЕРЖАНИЕ
З предмету _______“Web-технології та Web-дизайн”___________
Завдання на курсову роботу студента
3 Дослідження предметної галузі
4. Структура електронного підручника та схеми навігації
5 Сценарії та основні модулі інформаційної системи
1 Головна сторінка (index.Html)
3 Код сторінки з питаннями для самоконтролю (1914—1918.Html)
</article>
</div>
</html>
2 Шаблон (drop_gor_menu.Css)
Шаблон CSS – опис зовнішнього вигляду і форматування сайту.
Призначення: для опису зовнішнього вигляду і форматування сайту написаного мовою розмітки (як HTML). Сприймайте це, як свого роду макіяж для нашої веб-сторінки.
Код таблиці стилів:
ul.menu {
margin: auto;
padding: 0;
height: 30px;
width: 100%;
background: url("images/gor_menu_fon.png") repeat-x;
}
ul.menu li {
background: url("images/gor_menu_punkt.png") 12px 5px no-repeat;
float: left;
list-style: none;
}
ul.menu li a {
color: #8B4513;
display: block;
padding: 6px 32px 0px;
text-decoration: none;
}
ul.menu li a:hover {
background: url("images/gor_menu_hover.png") 12px 5px no-repeat;
}
ul.menu li ul {
display: none;
margin-left: 12px;
padding: 0px;
}
ul.menu li:hover ul {
display: block;
position: absolute;
}
ul.menu li:hover ul li {
float: none;
}
ul.menu ul li {
color: #8B4513;
background: url("images/gor_menu_hover.png") 12px 5px no-repeat;
padding: 6px 12px 0px;
}
ul.menu ul li:hover {
color: #8B4513;
background: url("images/gor_menu_fon.png") repeat-x;
padding: 6px 12px 0px;
}
ul.menu ul li a {
color: #8B4513;
padding: 6px 12px 0px;
}
ul.menu ul li a:hover {
background: url("images/gor_menu_fon.png") repeat-x;
color: #FF7F50;
padding: 6px 12px 0px;
}
ul.menu li:hover ul li a {
padding: 0px 0 8px;
}
#container_2 {
min-width:1100px;
width:100%
text-align: left;
margin: 0 auto;
background: none;
#slider-container21 { width: 100%}
#djslider-loader21 {width: 100%}
#djslider21 { width: 71%}
.images img{width:70%;padding:200px 0;}
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}
background: url(images/12.jpg);
background-repeat: no-repeat;
/* если ширина окна <= 1000px ... */
/*открываем media query*/
@media screen and (max-width: 1000px) {
/* Делаем основной контент немного шире */
#content {
width: 75%;
}
/* Переносим навигацию наверх сайдбара */
#nav, #sidebar {
width: 25%;
}
/* Регулируем отступы сайдбара */
#sidebar .inner {
margin-right: 0;
margin-top: 20px;
}
.page {
min-height: 100%;
height: auto !important;
height: 100%;
background: #999;
}
#content {
float: left;
width: 65%;
margin: 0 0 20px 0;
padding: 0;
}
#content .inner {
margin-right: 20px;
padding: 20px;
color: #333;
background: #E0E4CC;
}
.wrap {padding-bottom: 100px;}
.footer {
height: 100px;
margin-top: -100px;
background: #f00;
}
@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
}
#content {
width: 60%;
padding: 3% 4%;
}
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}
/*закрываем media query*/
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
li {
display: inline-block; /* Строчно-блочные элементы */
background: #CA181A; /* Цвет фона */
margin-right: 3px; /* Расстояние между пунктами меню */
-webkit-transform: skewX(-30deg); /* Для Safari и Chrome */
-moz-transform: skewX(-30deg); /* Для Firefox */
-o-transform: skewX(-30deg); /* Для Opera */
-ms-transform: skewX(-30deg); /* Для IE */
transform: skewX(-30deg); /* CSS3 */
}
a {
color: #fff; /* Цвет ссылок */
display: block; /* Блочный элемент */
padding: 5px 15px; /* Поля вокруг текста */
text-decoration: none; /* Убираем подчёркивание */
-webkit-transform: skewX(30deg); /* Для Safari и Chrome */
-moz-transform: skewX(30deg); /* Для Firefox */
-o-transform: skewX(30deg); /* Для Opera */
-ms-transform: skewX(30deg); /* Для IE */
transform: skewX(30deg); /* CSS3 */
}
li:hover {
background: #333; /* Цвет фона при наведении курсора мыши */
}
}
#footer { height: 50px;
background: #f7f7f7;
position: absolute;
bottom: 0;
width: 100%;background:url(images/12.jpg);background-repeat:repeat-x;font-family:Times;font-size:14px;font-weight:bold;color:#ee7e1f;text-align:center;text-
decoration:none;padding:25px 0 0 0 }
#footer span{color:white;}
.designedby {font-family:Arial;font-size:11px;font-weight:bold;color:#ee7e1f;text-align:center;text-decoration:none}
.designedby:hover {font-family:Arial;font-size:11px;font-weight:bold;color:#ee7e1f;text-align:center;text-decoration:underline}
.xhtml, .xhtml:hover
{width:66px;height:17px;float:left;margin:0;padding:1px 0 0 0;font-family:Arial;font-size:11px;color:#000;text-align:center;text-decoration:none;background:url(images/xhtml.jpg) no-repeat}
.css, .css:hover {width:66px;height:18px;float:left;margin:0 0 0 5px;padding:0;font-family:Arial;font-size:11px;color:#000;text-align:center;text-decoration:none;background:url(images/xhtml.jpg) no-repeat}
.printSelected div{display:none;background:white;color:black;}
.printSelected h1,.printSelected h2, .printSelected p{color:black;}
.printSelected div.printSelection{display:block;}
.printSelected div.printSelection div{display:block;}
3 Код сторінки з питаннями для самоконтролю (1914—1918.Html)
Тести – потрібні для самоконтролю з сайта за для перевірки набутих знань.
Призначення: аналіз, перевірка та відточування навиків та знань.
Зображення 2 (1914—1918.html)
Зображення 3 (1914—1918.html)
Код сторінки:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="styledmenus.com" />
<title>Всесвітня Історія Е.П.</title>
<link rel="stylesheet" href="drop_gor_menu.css" type="text/css" />
<link rel="icon" href="images/icon.ico" />
</head>
<style>
body {
background: url(images/12.jpg) no-repeat;
-moz-background-size: 20%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
background-position: left, right;
background-repeat: repeat-y, repeat-y;
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
li {
display: inline-block; /* Строчно-блочные элементы */
background: #CA181A; /* Цвет фона */
margin-right: 3px; /* Расстояние между пунктами ме
ню */
-webkit-transform: skewX(-30deg); /* Для Safari и Chrome */
-moz-transform: skewX(-30deg); /* Для Firefox */
-o-transform: skewX(-30deg); /* Для Opera */
-ms-transform: skewX(-30deg); /* Для IE */
transform: skewX(-30deg); /* CSS3 */
}
a {
color: #fff; /* Цвет ссылок */
display: block; /* Блочный элемент */
padding: 5px 15px; /* Поля вокруг текста */
text-decoration: none; /* Убираем подчёркивание */
-webkit-transform: skewX(30deg); /* Для Safari и Chrome */
-moz-transform: skewX(30deg); /* Для Firefox */
-o-transform: skewX(30deg); /* Для Opera */
-ms-transform: skewX(30deg); /* Для IE */
transform: skewX(30deg); /* CSS3 */
}
li:hover {
background: #333; /* Цвет фона при наведении курсора мыши */
}
}
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/menu.js"></script>
<script type="text/javascript" language="javascript">
function printBlock() {
PrintContent = $('#PrintContent').html();
$('body').addClass('printSelected');
$('body').append('<div class="printSelection">'+PrintContent+'</div>');
window.print();
window.setTimeout(pageCleaner,0);
return false;
}
function pageCleaner(){
$('body').removeClass('printSelected');
$('.printSelection').remove();
}
</script>
<div style="height:1000px">
<div id="pageBody">
<ul class="menu">
<li><a href="index.html">Главная</a>
<li><a href="#">Программа</a>
<ul>
<li><a href='seminar.html'>Семінар</a></li>
<li><a href="o_1.html">Всесвітня історія Опорний коеспект</a></li>
<li><a href="mod_kartka.html">Модульна картка</a></li>
<li><a href="dvd.html">Список відеофільмів та DVD</a></li>
</ul>
<li><a href="#">Словники</a>
<ul>
<li><a href="biograph_dov.html">Біографічний довідник</a></li>
<li><a href="slovar.html">Словник Термінів</a></li>
</ul>
<li><a href="#">Тести</a>
<ul>
<li><a href='1914—1918.html'>Перша світова війна 1914—1918 рр. Повоєнне облаштування світу</a></li>
<li><a href="1917—1923.html">Період повоєнної кризи та революцій 1917—1923</a></li>
<li><a href="1924—1929.html">Період стабілізації в Європі та в Північній Америці 1924—1929</a></li>
<li><a href="1929—1933.html">Світ в період економічної кризи 1929—1933 рр. та подолання її наслідків</a></li>
</ul>
<li><a href='connect.html'>Контакти</a></li>
</ul>
<table width="1293" border="0" align="center" cellspacing="0" cellpadding="0">
<tr><td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="310" align="right">
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<h1>
</div>
</h1>
<h3 style="color: rgb(0, 0, 0); font-family: Classica One; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px">
<font size="10">Всесв<span lang="en-us">i</span>тня <span lang="en-us">I</span>стор<span lang="en-us">i</span>я</font></h3>
<p><font face="Classica One" size="5">Тест по тем<span lang="en-us">i</span>:
<span lang="en-us">"</span>Перша св<span lang="en-us">i</span>това в<span lang="en-us">i</span>йна
1914-1918 рр. Повоэнне облаштування св<span lang="en-us">i</span>ту<span lang="en-us">"</span></font></p>
<p>
<div id="contentmid">
<div class="icons">
<a href="#" title="Роздрукувати" onclick="printBlock();"><img src="images/print (1).ico" title="Роздрукувати"/></a>
</div>
<div id="PrintContent">
<div class="midtxt">
</div>
</p>
<tr><td align="right"><img src="images/hr_line.gif" width="432" height="1" alt=""></td></tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="welcome">
<tr>
<td width="228" valign="top" align="right">
<p class="font_small"></p>