Розробка довідково-інформаційної бази Факультету комп’ютерних систем (стр. 2 из 3)
2.13. При порушенні "Санітарних норм і правил влаштування і обладнання кабінетів комп'ютерної техніки в навчальних закладах та режиму праці учнів на персональних комп'ютерах" винні притягуються до дисциплінарної, адміністративної і кримінальної відповідальності згідно Закону України "Про забезпечення санітарного та епідемічного благополуччя населення", ст. 10, 19, 20, 24, 40.
2.14. З введенням в дію цих СанПіН втрачають силу:
- "Временные санитарно-гигиенические нормы и правила устройства, оборудования, содержания и режима работы на персональных электронно-вычислительных машинах и видеодислейных терминалах в кабинетах вычислительной техники и дисплейных классах всех типов средних учебных заведений" № 5146-89 от 20.10.89 г. (МЗ СССР);
- "Гигиенические и эргономические условия организации рабочих мест и режима учебных занятий с применением средств вычислительной техники в средней общеобразовательной школе", Київ, МОЗ України, 30.10.90 р. (методичні рекомендації).
3. Вимоги до приміщень та розташування робочих місць з ПК
3.1. Приміщення, призначені для роботи з ПК, повинні мати природне освітлення. Орієнтація вікон повинна бути на північ або північний схід, вікна повинні мати жалюзі, які можна регулювати, або штори.
3.2. Не дозволяється розміщувати кабінети обчислювальної техніки у підвальних приміщеннях будинків.
3.3. Кабінети, обладнані комп'ютерною технікою, в навчальних закладах повинні розміщуватись в окремих приміщеннях з природним освітленням та організованим обміном повітря.
Площа на одного учня, який працює за ПК, повинна складати не менше 6,0 кв. м, об'єм - не менше 20 куб. м. Площа учбових приміщень з ПК повинна розраховуватись на півкласу учнів, але не більш як 12 чоловік.
3.4. Стіни, стеля і підлога та обладнання кабінетів комп'ютерної техніки повинні мати покриття із матеріалів з матовою фактурою з коефіцієнтом відбиття: стін - 40-50 %, стелі - 70-80 %, підлоги - 20-30 %, предметів обладнання - 40-60 % (робочого столу - 40-50 %, корпуса дисплею та клавіатури - 30-50 %, шаф та стелажів - 40-60 %).
3.5. Поверхня підлоги повинна мати антистатичне покриття та бути зручною для вологого прибирання.
3.6. Забороняється використовувати для оздоблення інтер'єру приміщень комп'ютерних класів полімерні матеріали (дерев'яно-стружкові плити, шпалери, що придатні для миття, плівкові та рулонні синтетичні матеріали, шаровий паперовий пластик та ін.), що виділяють у повітря шкідливі хімічні речовини, які перевищують гранично допустимі концентрації.
Вміст шкідливих хімічних речовин в повітрі дошкільних та учбових приміщень з комп'ютерною технікою не повинен перевищувати середньодобові концентрації, що наводяться в "Переліку гранично допустимих концентрацій забруднюючих речовин в атмосферному повітрі населених пунктів", № 3086-84 від 27.08.84 р. та доповненнях до нього, які затверджені Міністерством охорони здоров'я.
3.7. При будівлі нових і реконструкції діючих загальноосвітніх шкіл, середніх спеціальних і вищих учбових закладів висота приміщень (від підлоги до стелі), в яких передбачено використання персональних комп'ютерів в навчальному процесі, повинні бути не менше 3,6 м, а площа на 1 робоче місце 16 кв. м (ДБН В.2.2-3-97).
3. ЗМІСТ ТА РЕЗУЛЬТАТ ВИКОНАНИХ РОБІТ
3.1 Завдання
Створити довідково-інформаційну базу про Факультет Комп’ютерних Систем до приймальної комісії у вигляді сайту для абітурієнтів. Вона повинна містити:
рекламний ролик факультету;
корисну інформацію для абітурієнта;
інформацію про деканат факультету;
історію виникнення факультету;
інформацію про кафедри факультету;
інформацію про гуртожиток.
3.2Виконання
Розробимо структуру сторінки за наступною схемою:
Данну модель реалізуємо за допомогою html тегу Div. Div – блочний елемент мови html, як правило використовується для обробки блоку данних. Як правило блок керується таблицею каскадних стилів CSS. Яка може знаходитися безпосередньо у голові (Head) документу або у окремому файлі.
Селектори та їх призначення:
Main – блок який міститиме у собі всі три основні, логічно розділені блоки: Header, Content, Footer.
Header – блок який містить зіголовок добументу.
Logo – перший логотип.
Header-Text – текст заголовку.
Logo2 – другий логотип.
Content – блок для відображення основного змісту сторінки.
Menu – список категорій інформації яку можна дізнатися.
My_iframe – інформація з вибраної категорії.
Footer – блок для банеру або реклами.
Для реалізації відображення інформації на вибір користувача, використаємо CSS та JavaScript. CSS – для вибору режиму відображення блоків інформації у блоці My_iframe, які слідують один за одним послідовно та представляють відповідні категорії у блоці Menu. JavaScript - за для відображення лише потрібного блоку.
Реалізація у CSS:
.iframe_content_block
{
display:block;
text-decoration:none;
font-family:Arial;
font-style:italic;
font-weight:bold;
font-size:16px;
color:#1f2f7f;
position:relative;
width:100%;
}
.iframe_content_none
{
display:none;
text-decoration:none;
font-family:Arial;
font-style:italic;
font-weight:bold;
font-size:16px;
color:#1f2f7f;
position:relative;
width:100%;
}
Тут display:none та display:block дозволяє та забороняє відображення блоку з відповідними класами .iframe_content_none та .iframe_content_ block. Зміна класів блоків здійснюється за допомогою JavaScript.
Реалізація у JavaScript:
function menu(menu_id)
{
for(var i=Number(1);i<=6;i++)
document.getElementById("if_c_"+i).className=
"iframe_content_none";
switch (Number(menu_id))
{
case 1: document.getElementById("if_c_1").className=
"iframe_content_block"; break;
case 2: document.getElementById("if_c_2").className=
"iframe_content_block"; break;
case 3: document.getElementById("if_c_3").className=
"iframe_content_block"; break;
case 4: document.getElementById("if_c_4").className=
"iframe_content_block"; break;
case 5: document.getElementById("if_c_5").className=
"iframe_content_block"; break;
case 6: document.getElementById("if_c_6").className=
"iframe_content_block"; break;
}
}
Функція document.getElementById("ім’я_елементу") вертає єлемент у якого id="ім’я_елементу", використовуючи цю функцію ми змінюємо клас усіх наявних єлементів на той що їх ховає. При умові що єлементи мають імена:
if_c_1, if_c_2, if_c_3, if_c_4, if_c_5, if_c_6. Остання цифра цих імен задається змінною i яка перебирається у циклі:
for(var i=Number(1);i<=6;i++)
document.getElementById("if_c_"+i).className=
"iframe_content_none";
Потім використовуючи оператор switch ми міняємо клас одного потрібного нам блоку на такий що дозволяє його відображати.
switch (Number(menu_id))
{
case 1: document.getElementById("if_c_1").className=
"iframe_content_block"; break;
case 2: document.getElementById("if_c_2").className=
"iframe_content_block"; break;
case 3: document.getElementById("if_c_3").className=
"iframe_content_block"; break;
case 4: document.getElementById("if_c_4").className=
"iframe_content_block"; break;
case 5: document.getElementById("if_c_5").className=
"iframe_content_block"; break;
case 6: document.getElementById("if_c_6").className=
"iframe_content_block"; break;
}
Зміна кількості розділів веде до зміни коду. Наприклад внас є лише два розділи: if_c_1 та if_c_2. Код скрипту буде змінений на:
function menu(menu_id)
{
for(var i=Number(1);i<=2;i++)
document.getElementById("if_c_"+i).className=
"iframe_content_none";
switch (Number(menu_id))
{
case 1: document.getElementById("if_c_1").className=
"iframe_content_block"; break;
case 2: document.getElementById("if_c_2").className=
"iframe_content_block"; break;
}
}
Блок меню буде виглядати так:
<div id="content">
<div id="menu">
<ul>
<li><a href="javascript:menu(1);">Розділ 1</a></li>
<li><a href="javascript:menu(2);">Розділ 2</a></li>
</ul>
</div>
<div id="my_iframe">
<div class="iframe_content" id="if_c_1">
</div>
<div class="iframe_content" id="if_c_2">
</div>
</div>
</div>
Для данної моделі html код матиме наступний вигляд:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<LINK REL=StyleSheet HREF="css/style.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<div id="main">
<div id="header">
<div id="logo">
</div>
<div id="header-text">
</div>
<div id="logo2">
</div>
</div>
<div id="content">
<div id="menu">
<ul>
<li>
<img src="img/disk.gif" class="left">
<a href="javascript:menu(1);">Головна</a>
<img src="img/disk.gif" class="right">
</li>
<li>
<img src="img/disk.gif" class="left">
<a href="javascript:menu(2);">Абітурієнту</a>
<img src="img/disk.gif" class="right">
</li>
<li>
<img src="img/disk.gif" class="left">
<a href="javascript:menu(3);">Деканат</a>
<img src="img/disk.gif" class="right">
</li>
<li>
<img src="img/disk.gif" class="left">
<a href="javascript:menu(4);">Історія</a>
<img src="img/disk.gif" class="right">
</li>
<li>
<img src="img/disk.gif" class="left">
<a href="javascript:menu(5);">Кафедри</a>
<img src="img/disk.gif" class="right">
</li>
<li>
<img src="img/disk.gif" class="left">
<a href="javascript:menu(6);">Гуртожиток</a>
<img src="img/disk.gif" class="right">
</li>
</ul>
</div>
<div id="my_iframe">