Biologii.Net  
   
Поиск по сайту:  
 
Главная  
 
Меню
Главная
Об авторе
ФМШ
Биология
Олимпиады
КСЕ
Техотдел
Кулуары
Файловый архив
Карта сайта
Контакты
Редколлегия
Сказать
Написать мне
Последние новости
Кто он-лайн
Сейчас на сайте:
Гостей - 1
"Элементы" - новости науки
Авторизация





Забыли пароль?
Прогноз погоды
О сайте

Новосибирский государственный университет

Cайт преподавателя биологии.

Лекции, задачи, олимпиады, etc.

Новосибирск 

Путеводитель по сайту
Что здесь есть. Краткая информация о разделах сайта. 
Основные направления - учебные материалы по двум предметам - биологии и современному естествознанию.
Раздел БИОЛОГИЯ предназначен школьникам старших классов, изучающим биологию и преподавателям. Основное его содержание - лекции в форме презентаций (лежат в папке Biology файлового архива).  Здесь же есть материалы для подготовки к ЕГЭ по биологии.
Сайт ТЕСТОВ ПО БИОЛОГИИ добавлен в сентябре 2009 г. Здесь можно проверить свои знания он-лайн.
Раздел ОЛИМПИАДЫ - о биологических олимпиадах, в проведении которых участвует новосибирская ФМШ и автор сайта.  Там же подборка ссылок на олимпиадные сайты.
В разделе КСЕ публикуются материалы по курсу "Концепции современного естествознания" для студентов НГУ. Презентации и конспекты лекций выкладываются здесь. Кроме программы курса, есть довольно много ссылок на научные сайты и библиотеки. 
Раздел ФМШ - страничка кафедры естественных наук новосибирской физматшколы.
ФАЙЛОВЫЙ АРХИВ содержит файлы для скачивания по тематике всех разделов в соответствующих папках. 
И, наконец, ТЕХОТДЕЛ рассказывает о том, как тут все сделано. 
Подсветка активного пункта меню на PHP Версия для печати
Написал Administrator   
06.10.2009

Когда я делала первый сайт с использованием PHP, то долго мучилась над проблемой - как сделать подсветку активного пункта меню. Понятно, что если на каждый пункт меню - отдельный файл, то все просто - пишем активному пункту свой класс в CSS и на странице указываем его для нужного пункта.

Но если использовать блочное построение страниц, когда страница с меню одна и включается в файлы с содержимым через include, то тогда и встает проблема - как дать знать ей, что здесь надо подсвечивать именно этот пункт?

Надо сказать, что первый раз я решила эту проблему страшно криво, и только потом наткнулась на гораздо более простой путь, через переменные. Наверное, это тоже не верх совершенства, но пока ничего проще не нашла. Приведу две версии - для разных способов сборки сайта из блоков.

Рассмотрим два варианта блочной структуры сайта.  

Вариант 1.  Используется в интерактивных сайтах, где страницы могут содержать php-программы - например, формы обратной связи, гостевые, комментарии посетителей и тому подобное. 

Сайт в этом варанте представляет из себя много страниц с содержимым - назовем их index.php, chapter_1.php, chapter_2.php и т.д., в каждую из которых через include включается файл, содержащий шапку и меню - header.php и другие блоки - подвал, различные модули (с популярными статьями, с комментариями - да что угодно).

Image
Рис.1. Красным выделены блоки, вставляемые через include в разные страницы сайта. Эти блоки одинаковы на всех страницах, а Сontent на каждой странице свой. На сером фоне – названия файлов. Для примера приведены две разные страницы.

 Проблема в чем - файл header.php у нас один на всех страницах, а надо, чтобы подсветка пунктов меню была разной.

Для этого блок меню в header.php пишется примерно так:

Файл header.php

 
<div id="menu">
<ul>
<li class="<?=$main;?>"> <a href="index.php"> Главная </a> </li>
<li class="<?=$chapter1;?>"> <a href="chapter_1.php"> Раздел 1 </a> </li>
<li class="<?=$chapter2;?>"> <a href="chapter_2.php"> Раздел 2 </a> </li>
<li class="<?=$about;?>"> <a href="about.php"> О нас </a> </li>
</ul>
</div>

Мы задали стиль каждого пункта меню отдельной переменной - в данном примере это $main, $chapter1, $chapter2  и  $about.

Дальше в файле CSS сайта создаем класс для активного пункта меню - обычно он другого цвета, но можно сделать что угодно - и больший размер шрифта, и подчеркивание, и даже отдельную картинку фона - дело вкуса. Все нужные вам свойства просто прописываются в этом классе (если не знаете, как - смотрите справочники и учебники по CSS, например здесь).

Файл style.css

 
  #menu .active a 
{
color: #FFFFFF;   /* Задаем белый цвет шрифта для этого класса */
}

Итак, мы задали белый цвет для пункта меню, которому присвоен класс "active" (неактивные пункты были красные)

Что делать дальше, я думаю, вы уже догадались сами. В каждом файле с уникальным содержимым осталось только где-нибудь наверху - где угодно, но важно, чтобы ДО строки

include_once(header.php);

присвоить нужной переменной значение active.

Например, во всех файлах, относящихся к разделу 1 - т.е. тех, где мы хотим, чтобы был подсвечен пункт меню РАЗДЕЛ 1 вставляем -

Файл chapter_1.php

 
   <?php
$chapter1 = "active";
## здесь могут быть еще любые строки с кодом
include_once(header.php);
?>

Вариант 2. Подходит для статичных сайтов, где контент - это обычные html-страницы.

Весь сайт в данном случае может фактически быть одной страницей - назовем ее index.php, которая представляет собой в сущности "рамку": шапку с меню, боковые и нижние меню, подвал. В центре этой рамки определяем область для контента, в которую мы и будем вставлять html-cтраницы с содержимым - main.html, chapter_1.html, chapter_2.html и т.д. По этому типу сверстан сайт лаборатории.

Image
Рис.2. Красным выделены страницы с содержимым, вставляемые через include в одну главную страницу сайта, которая служит как бы рамкой. Header и Footer здесь – просто блоки ее кода, которые могут быть div-ами, или ячейками таблицы. Для примера приведены главная страница и - она же, но контент вставлен из html-файла с id=222.

Проблема все та же - файл, содержащий меню - index.php у нас один, а контент меняется, и надо подсвечивать разные пункты.

Конечно, так же, как в предыдущем случае, в файле css сайта у нас должны быть определены свойства для класса active активного пункта меню.

Файл style.css

 
#topmenu .item {
float: left;
background: url(menut.jpg);
margin: auto 6px;
padding: auto 3px;
height: 38px;
text-align: center;
vertical-align: middle;
width:auto;
}
 
#topmenu a {
font-family: Arial, Verdana;
color: #6CA;
font-size: 15px;
font-family: Arial, Verdana;
font-weight: 800;
text-decoration: none
}
 
#topmenu  a.active {
color: #FFF;
}
 
#topmenu a:hover {
color: #FFF;
border-bottom: #FFF solid 1px;
}

Теперь - фрагменты кода основной страницы упомянутого лабораторного сайта. Там столкнулась с какой-то старой версией PHP на сервере, которая не понимала краткую запись вставки кода через <? а понимала только <?php. Поэтому код несколько корявый. 

Файл index.php

 
   <?php
/* Определяем, какой пункт меню должен быть активен если включается 
файл с содержимым с определенным id */
 
    if (isset($_GET['id'])) $id = $_GET['id']; else $id=1;
    if ($id<=9) $main='active'; else $main='';
    if ($id>=10 and $id<=99) $ch1='active'; else $ch1=''; 
    if ($id>=100 and $id<=199) $ch2='active'; else $ch2=''; 
 ?>
 
/* Блок МЕНЮ. Пишем обычный HTML код, с включениями PHP, в которых класс
каждого пункта меню опредеяется через свою отдельную переменную */
 
  <DIV class="item">
<p><a <?php echo'class="'.$main.'"'; ?> href="index.php?id=1">Главная</a></p>
</DIV>
<DIV class="item">
<p><a <?php echo'class="'.$ch1.'"'; ?> href="?id=10">Раздел 1</a></p>
</DIV>
<DIV class="item">
<p><a <?php echo'class="'.$ch2.'"'; ?> href="?id=100">Раздел 2</a></p> 
</DIV>
 
/* Блок КОНТЕНТА. Определяем, какие файлы должны туда включаться
в зависимости от id */
 
<div id=content> 
<?php  
    if ($id==1){ include("home.html"); }
    if ($id==10){ include("chapter_1/main_ch1.html"); } 
    if ($id==100){ include("chapter_2/main_ch2.html"); }
    if ($id==101){ include("chapter_2/01_ch2.html"); } 
?> 
</div>

Отмечу, что файлов у нас может быть, конечно больше, чем пунктов меню. Так здесь для различных файлов, где должно подсвечиваться меню "Главная", зарезервированы id c 1 по 9, для раздела 1 - с 10 по 99, для раздела 2 - тоже 100 разных id. 

В этом варианте сайта все ссылки на любую его страницу имеют вид index.php?id=номер

Можно сделать и по-другому: кроме переменной id, обозначающей конкретный файл, ввести еще и переменную cat, обозначающую раздел, а уже внутри нее присваивать разные id страницам. Тогда ссылки будут вида index.php?cat=номер&id=номер . Это более логично и кратко. Общий принцип, думаю, понятен.

По этому же принципу можно сделать сменяющиеся, в зависимости от контента заголовки у нашей единственной страницы index.php (то, что находится между тегами<title> в ее шапке и видно посетителю в меню браузера) - тоже через переменную.

Сами html-страницы контента тоже могут содержать включаемые блоки - например, подменю данных разделов.

Как пример реализации варианта 2 прицепляю основной файл сайта лаборатории. Просьба только не тырить дизайн, он авторский.

Последнее обновление ( 28.02.2010 )
 
< Предыдущая статья   Следующая статья >
Самое читаемое на сайте
Последние комментарии
Статистика файлов
Архив содержит 97 файлов в 19 разделах. К настоящему времени они были скачаны 85983 раз.
Разделы файлового архива
Последние файлы
vsesib_16-17_bio_3et_otvety.zip
18-03-2017
municipal_16-17_Novosib_bio.zip
25-11-2016
vsesib_16_17_bio_1_etap_otv.zip
03-11-2016
vsesib_15-16_bio_3et_otvety.zip
19-03-2016
biol_2_et_2015_Novosib.zip
18-11-2015

Biologii.Net © 2009-17

Материалы сайта являются авторскими.
Если вы что-то скопировали – не забудьте поставить ссылку.

почта Белка