Внешний вид основный страниц сайта
Рисунок
3. Главная страница
Рисунок
4. Страница Медиа
Рисунок
5. Страница "Структура совета"
Рисунок
6. Страница форума
Рисунок
7. Страница архива новостей
Описание html-кода основных статических страниц сайта
index.php
<!DOCTYPE html>
<html>
<head>
<title>ОС ФСКН</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div id="head_wrap">
<div id="logo">
<img src="images/interface/logo.png">
</div>
<div id="menu">
<ul class="main_menu">
<a href="index.php"><li style="border-right: none;">Главная</li></a>
<a href="media.php"><li style="border-right: none">Медиа</li></a>
<a href="structure.php"><li style="border-right: none;">Структура совета</li></a>
<a href="forum.php"><li style="border-right: none;">Форум</li></a>
<a href="archive.php"><li>Архив новостей</li></a>
</ul>
</div>
</div>
</header>
<div id="content">
<div id="left_col">
<div id="news">
<div class="title_news">Новости</div>
<div class='new_item'>
<div class='date'><span style='font-size:1.82em'>1</span></br><span style='font-size:1.16em'>января</div>
<div class='text_block'>
<div class='article_new'>Новый год</div>
<div class='text_new'><img align='left' src='./images/news/571e32a9497bc9ce85a05dda04543fd6.jpg'>Всех с новым годом, друзья!...</div>
<div class='more'><a href='news.php?id=1'>Подробнее...</a></div>
</div>
</div>
<div class='new_item'>
<div class='date'><span style='font-size:1.82em'>13</span></br><span style='font-size:1.16em'>января</div>
<div class='text_block'>
<div class='article_new'>Старый новый год</div>
<div class='text_new'><img align='left' src='./images/news/a335e0259ed6062d4403bc73bfff394b.jpg'>С праздником......</div>
<div class='more'><a href='news.php?id=2'>Подробнее...</a></div>
</div>
</div>
<div class='new_item'>
<form action = "./DBScripts/addnews.php" method = "POST" enctype = 'multipart/form-data'>
<div class='date'><span style='font-size:1.82em'><input style = "width: 50px;" type = "number" name = "day" placeholder="День"></span></br><span style='font-size:1.16em'><input style = "width: 60px;" type = "number" name = "month" placeholder="Месяц"></div>
<div class='text_block'>
<div class='article_new'>
<input style = "width: 150px;" type = "text" name = "title" placeholder="Заголовок новости">
</div>
<div class='text_new'>
<img align='left' src='images/news/null.jpg'>
<textarea style = 'height: 200px; width: 50%;' align = 'left' name = 'content' placeholder = 'Содержание'></textarea>
</div>
</div>
<input type = "submit" name = "action" value = "Добавить">
</form>
</div>
</div>
</div>
<div id="right_col">
<div class="pust_vsegda">
<a href="./project.php"><img src="./images/interface/ia.jpg"></img></a>
</div> <script>
$(document).ready(function(){$('.main_form').css({'display':'none'})});
function toggle(){
var el = document.getElementById('main_form');
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
</script>
<div id="ip" onClick='toggle()'>
<div class="ip_title">
<img src="./images/interface/ip.png"> <span class="text_article_ip">Интернет приемная</span>
</div>
<div class="ip_forma">
<form class="main_form" id="main_form">
<input type="email" name="email" placeholder="Введите e-mail"></input>
<input type="text" name="fam" placeholder="Введите Фамилию"></input>
<input type="text" name="name" placeholder="Введите имя"></input>
<input type="text" name="surname" placeholder="Введите отчество"></input>
<input type="text" name="theme" placeholder="Тема сообщения"></input>
<textarea type="textarea" name="message" placeholder="Сообщение..."></textarea>
<input class="button_ip_submit" type="submit" value="ОТПРАВИТЬ"></input>
</form>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="copys">
<span class="fskn">©2013 Общественный совет при УФСКН РФ по Самарской области</span><br>
<span class="volga">Разработано в «Volga-IT-Group»</span>
</div>
<div class="links">
<a href="http://samaraanticorr.ru/"><img src="./images/interface/5375.png" width="150" height="54" alt="police" style="margin-top: 10px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;" /></a>
<a href="http://guvd63.ru/society/8588/"><img src="./images/interface/police.gif" width="150" height="54" alt="police" style="margin-top: 10px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;" /></a>
<a href="http://www.63.fskn.gov.ru/"><img src="./images/interface/UPFO.gif" width="150" height="54" alt="police" style="margin-top: 10px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;" /></a>
</div>
</div>
</body>
</html>media.php
<!DOCTYPE html>
<html>
<head>
<title>ОС ФСКН - Медиа</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div id="head_wrap">
<div id="logo">
<img src="images/interface/logo.png">
</div>
<div id="menu">
<ul class="main_menu">
<a href="index.php"><li style="border-right: none;">Главная</li></a>
<a href="media.php"><li style="border-right: none">Медиа</li></a>
<a href="structure.php"><li style="border-right: none;">Структура совета</li></a>
<a href="forum.php"><li style="border-right: none;">Форум</li></a>
<a href="archive.php"><li>Архив новостей</li></a>
</ul>
</div>
</div>
</header> <div id="content">
<div id="left_col">
<div id="media_main">
<div class="title">Медиа</div>
<div class="custom" >
<div id="media">
<div id="photo">
<br>
<span style="color: #206CCD; font-size: 1.59em; line-height: 1.2em; margin-bottom: 15px;">Альбомы новостей</span>
<br>
<div class='album'><div class='album_title'>Новый год<br></div><div class='imagelist'><a href='images/news/571e32a9497bc9ce85a05dda04543fd6.jpg' rel='lightbox-tour'><img src='images/news/571e32a9497bc9ce85a05dda04543fd6.jpg'></a> <a href='images/news/87d07f90f10c40ed8075f45c042fe6f6.jpg' rel='lightbox-tour'><img src='images/news/87d07f90f10c40ed8075f45c042fe6f6.jpg'></a> <a href='images/news/538dcf9d8b98ac9a193a01f25d975ad2.jpg' rel='lightbox-tour'><img src='images/news/538dcf9d8b98ac9a193a01f25d975ad2.jpg'></a> </div><a href='albums.php?id=1'>Смотреть полный альбом</a></div><div class='album'><div class='album_title'>Старый новый год<br></div><div class='imagelist'><a href='images/news/a335e0259ed6062d4403bc73bfff394b.jpg' rel='lightbox-tour'><img src='images/news/a335e0259ed6062d4403bc73bfff394b.jpg'></a> <a href='images/news/06d3bc740e8ba0c8f64427649f537269.jpg' rel='lightbox-tour'><img src='images/news/06d3bc740e8ba0c8f64427649f537269.jpg'></a> <a href='images/news/4f6a306c94af679657ced7273b5ad4ea.jpg' rel='lightbox-tour'><img src='images/news/4f6a306c94af679657ced7273b5ad4ea.jpg'></a> </div><a href='albums.php?id=2'>Смотреть полный альбом</a></div></div> </div>
</div>
</div>
</div>
<div id="right_col">
<div class="pust_vsegda">
<a href="./project.php"><img src="./images/interface/ia.jpg"></img></a>
</div> <script>
$(document).ready(function(){$('.main_form').css({'display':'none'})});
function toggle(){
var el = document.getElementById('main_form');
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
</script>
<div id="ip" onClick='toggle()'>
<div class="ip_title">
<img src="./images/interface/ip.png"> <span class="text_article_ip">Интернет приемная</span>
</div>
<div class="ip_forma">
<form class="main_form" id="main_form">
<input type="email" name="email" placeholder="Введите e-mail"></input>
<input type="text" name="fam" placeholder="Введите Фамилию"></input>
<input type="text" name="name" placeholder="Введите имя"></input>
<input type="text" name="surname" placeholder="Введите отчество"></input>
<input type="text" name="theme" placeholder="Тема сообщения"></input>
<textarea type="textarea" name="message" placeholder="Сообщение..."></textarea>
<input class="button_ip_submit" type="submit" value="ОТПРАВИТЬ"></input>
</form>
</div>
</div> </div>
</div>
<div class="footer">
<div class="copys">
<span class="fskn">©2013 Общественный совет при УФСКН РФ по Самарской области</span><br>
<span class="volga">Разработано в «Volga-IT-Group»</span>
</div>
<div class="links">
<a href="http://samaraanticorr.ru/"><img src="./images/interface/5375.png" width="150" height="54" alt="police" style="margin-top: 10px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;" /></a>
<a href="http://guvd63.ru/society/8588/"><img src="./images/interface/police.gif" width="150" height="54" alt="police" style="margin-top: 10px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;" /></a>
<a href="http://www.63.fskn.gov.ru/"><img src="./images/interface/UPFO.gif" width="150" height="54" alt="police" style="margin-top: 10px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;" /></a>
</div>
</div>
</body>
</html>structure.php
<!DOCTYPE html>
<html>
<head>
<title>ОС ФСКН - Структура Совета</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function show(id){
document.getElementById(id).style.display = "block";
}
function hide(id){
document.getElementById(id).style.display = "none";
}
</script>
</head>
<body>
<header>
<div id="head_wrap">
<div id="logo">
<img src="images/interface/logo.png">
</div>
<div id="menu">
<ul class="main_menu">
<a href="index.php"><li style="border-right: none;">Главная</li></a>
<!--<a href="docs.php"><li style="border-right: none;">Документы</li></a>-->
<a href="media.php"><li style="border-right: none">Медиа</li></a>
<!--<a href="action.php"><li style="border-right: none;">Акции</li></a>-->
<a href="structure.php"><li style="border-right: none;">Структура совета</li></a>
<a href="forum.php"><li style="border-right: none;">Форум</li></a>
<a href="archive.php"><li>Архив новостей</li></a>
</ul>
</div>
</div>
</header> <div id="content">
<div id="media_main">
<div class="title">Структура общественного совета</div>
<div class="custom_str" >
<div id=ss_body>
<div class="ss_main">
<div class="ss_head">Руководство</div>
<div class="ss_table">
<div class="ss_block">
<div class="ss_start" onclick="show('1')"><h4>Цветкова Ирина Владимировна</h4> <h1>Председатель общественного совета</h1></div>
<div class="ss_end" id="1"> Председатель Самарской областной организации Союза журналистов России, заслуженный работник культуры РФ.
<br><span style="color:#026ccd" onclick="hide('1')">Скрыть</span>
</div>
</div>
<div class="ss_block">
<div class="ss_start" onclick="show('2')"><h4>Нарушев Михаил Семенович</h4> <h1>Первый заместитель Председателя</h1></div>
<div class="ss_end" id="2">
Образование:
<br>1989-1994г.г.
<br>Самарский Государственный Университет Юридический факультет с отличием
<br>Трудовая деятельность:
<br>С 1994 - по н/в
<br>является Адвокатом Самарской областной коллегии адвокатов, Член квалификационной комиссии Палаты адвокатов Самарской области
<br><span style="color:#026ccd" onclick="hide('2')">Скрыть</span>
</div>
</div>
<div class="ss_block">
<div class="ss_start" onclick="show('3')"><h4>Быков Андрей Александрович</h4> <h1>Заместитель Председателя</h1></div>
<div class="ss_end" id = "3">
Образование:
<br>1989-1994г.г.
<br>Самарский Государственный Университет Юридический факультет с отличием
<br>Трудовая деятельность:
<br>С 1994 - по н/в
<br>является Адвокатом Самарской областной коллегии адвокатов, Член квалификационной комиссии Палаты адвокатов Самарской области
<br><span style="color:#026ccd" onclick="hide('3')">Скрыть</span>
</div>
</div>
<div class="ss_block">
<div class="ss_start" onclick="show('4')"><h4>Бородин Алексей Викторович</h4> <h1>Заместитель Председателя</h1></div>
<div class="ss_end" id = "4">
Образование:
<br>1989-1994г.г.
<br>Самарский Государственный Университет Юридический факультет с отличием
<br>Трудовая деятельность:
<br>С 1994 - по н/в
<br>является Адвокатом Самарской областной коллегии адвокатов, Член квалификационной комиссии Палаты адвокатов Самарской области
<br>С 2002 – по 2012 год
<br>вице-президент Палаты адвокатов Самарской области
<br>Общественная деятельность:
<br>С 2000 – по н/в
<br>Консультант общественной приемной аппарата полномочного представителя Президента РФ в Приволжском Федеральном округе
<br><span style="color:#026ccd" onclick="hide('4')">Скрыть</span>
</div>
</div>
<div class="ss_block">
<div class="ss_start" onclick="show('5')"><h4>Толстова Елена Валерьевна</h4> <h1>Секретарь совета</h1></div>
<div class="ss_end" id = "5">
Образование:
<br>1989-1994г.г.
<br>Самарский Государственный Университет Юридический факультет с отличием
<br>Трудовая деятельность:
<br>С 1994 - по н/в
<br>является Адвокатом Самарской областной коллегии адвокатов, Член квалификационной комиссии Палаты адвокатов Самарской области
<br><span style="color:#026ccd" onclick="hide('5')">Скрыть</span>
</div>
</div>
<div class="ss_block">
<div class="ss_start" onclick="show('6')"><h4>Колодов Дмитрий Александрович</h4> <h1>Пресс-секретарь совета</h1></div>
<div class="ss_end" id = "6">
<br><span style="color:#026ccd" onclick="hide('6')"></span>
</div>
</div>
<div class="ss_head">Группа по совершенствованию форм и методов профилактики наркомании, пропаганды здорового образа жизни и реабилитации наркозависимых.
</div>
<div class="ss_table">
<div class="ss_block">
<div class="ss_start" onclick="show('7')"><h4>Кочубей Ольга Витальевна</h4> <h1>Руководитель рабочей группы</h1></div>
<div class="ss_end" id="7">
Образование:
<br>1989-1994г.г.
<br>Самарский Государственный Университет Юридический факультет с отличием
<br>Трудовая деятельность:
<br>С 1994 - по н/в
<br>является Адвокатом Самарской областной коллегии адвокатов, Член квалификационной комиссии Палаты адвокатов Самарской области
<br><span style="color:#026ccd" onclick="hide('7')">Скрыть</span>
</div>
</div>
<div class="ss_block">
<div class="ss_start" onclick="show('8')"><h4>Мюльбах Дмитрий Витальевич</h4> <h1>Заместитель руководителя группы</h1></div>
<div class="ss_end" id="8">
Образование:
<br>1989-1994г.г.
<br>Самарский Государственный Университет Юридический факультет с отличием
<br>Трудовая деятельность:
<br>С 1994 - по н/в
<br>является Адвокатом Самарской областной коллегии адвокатов, Член квалификационной комиссии Палаты адвокатов Самарской области
<br><span style="color:#026ccd" onclick="hide('8')">Скрыть</span>
</div>
</div>
<div class="ss_block">
<div class="ss_start" onclick="show('9')"><h4>Корякин Сергей Александрович</h4> <h1>Член рабочей группы</h1></div>
<div class="ss_end" id = "9">
Образование:
<br>1989-1994г.г.
<br>Самарский Государственный Университет Юридический факультет с отличием
<br>Трудовая деятельность:
<br>С 1994 - по н/в
<br>является Адвокатом Самарской областной коллегии адвокатов, Член квалификационной комиссии Палаты адвокатов Самарской области
<br><span style="color:#026ccd" onclick="hide('9')">Скрыть</span>
</div>
</div>
</div>
</div>
<div class="ss_main">
<div class="ss_head">
</div>
<div class="ss_table">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="copys">
<span class="fskn">©2013 Общественный совет при УФСКН РФ по Самарской области</span><br>
<span class="volga">Разработано в «Volga-IT-Group»</span>
</div>
<div class="links">
<a href="http://samaraanticorr.ru/"><img src="./images/interface/5375.png" width="150" height="54" alt="police" style="margin-top: 10px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;" /></a>
<a href="http://guvd63.ru/society/8588/"><img src="./images/interface/police.gif" width="150" height="54" alt="police" style="margin-top: 10px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;" /></a>
<a href="http://www.63.fskn.gov.ru/"><img src="./images/interface/UPFO.gif" width="150" height="54" alt="police" style="margin-top: 10px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;" /></a>
</div>
</div>
</body>
</html>Описание скриптов для клиентской частей
Главный недостаток языка HTML — это полное отсутствие независимых от пользователя средств управления и контроля за отображением и просмотром Web-страниц. Содержимое и/или параметры отображения той или иной страницы задаются жестко в момент написания и не могут быть изменены в процессе отображения страницы и просмотра ее пользователем. Клиентские скрипты позволяют создать интерактивные web – страницы, внешний вид которых может быть задан пользователем без обращения к Web- серверу. Наиболее популярный язык для написания клиентских скриптов — JavaScript.Скрипт для открытия/закрытия некоторых элементов на странице (Интернет-приемная, члены совета и т. д.)
<script>
$(document).ready(function(){$('.main_form').css({'display':'none'})});
function toggle(){
var el = document.getElementById('main_form');
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
</script>