|
Итак, друзья, мы с вами установили шапку и сделали боковой блок на нашем сайте, теперь пришло время главного меню. Сразу хочу отметить, что здесь я имею в виду именно такое главное меню, которое является отдельным блоком, располагающимся сверху (как здесь) или снизу (как у нас на сайте сейчас) шапки. О так называемых "побочных" меню, которые легко сделать с помощью Конструктора Меню, будет сказано в последующих уроках. Что ж, приступим... Во-первых, как я уже отметила выше, наше меню будет совершенно отдельным блоком и, соотвественно, для него нужен определенный html код. Чтобы разобраться, какой именно код нужен, предлагаю посмотреть на эти ужасные надписи:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
<?$META_KEYWORDS$?>
<link type="text/css" rel="StyleSheet" href="/.s/src/css/823.css" />
</head>
<body>
$ADMIN_BAR$
<div id="wrap">
<div id="contanier">
<table class="main-table">
<tr>
<td class="data-block">$WDAY$<br>$DATE$<br>$TIME$</td>
<td class="login-block"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!--<s3167>-->Группа<!--</s>--> "<u>$USER_GROUP$</u>"<?else?><!--<s5212>-->Приветствую Вас<!--</s>--> <b>$USERNAME$</b><?endif?><br><?endif?><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a><?else?> | <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a><?endif?> <?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a><?else?> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$">RSS</a><?endif?></td>
</tr>
<tr>
<td class="side-block">
<!-- <sblock_menu> -->
<?if($SMENU_1$)?>
<table class="boxTable"><tr><td class="boxContent"><!-- <bc> -->$SMENU_1$<!-- </bc> --></td></tr></table>
<?endif?>
<!-- </sblock_menu> -->
$GLOBAL_CLEFTER$
</td>
<td class="content-block">
<h1 class="logo"><!-- <logo> -->Мой сайт<!-- </logo> --></h1>
<div class="text-block">
<!-- <middle> -->
<?if($MODULE_NAME$)?><h1 class="module-name">$MODULE_NAME$</h1><?endif?><!-- <body> -->$CONTENT$<!-- </body> -->
<!-- </middle> -->
</div>
</td>
</tr>
</table>
$GLOBAL_BFOOTER$
</div>
</div>
</body>
</html>
Это код основного шаблона страниц вашего сайта, с ним вы уже знакомы. Чтобы увидеть его, вам нужно зайти в Управление дизайном - Редактор страниц - Страницы сайта.
Теперь, для того чтобы создать главное меню, нужно вставить после тэга <div id="contanier"> вот этот код (код главного меню):
<div id="menunav" style="width: 1000px; margin-left: 0px">
<img src="url изображения меню" usemap="#HOME">
<map name="HOME">
<area href="код ссылки на пункт 1" shape="rect" coords="104,0,272,105">
<area href="код ссылки на пункт 2" shape="rect" coords="1 цифра, 2 цифра, 3 цифра, 4 цифра">
<area href="код ссылки на пункт 3" shape="rect" coords="1 цифра, 2 цифра, 3 цифра, 4 цифра">
<area href="код ссылки на пункт 4" shape="rect" coords="1 цифра, 2 цифра, 3 цифра, 4 цифра">
<area href="код ссылки на пункт 5" shape="rect" coords="1 цифра, 2 цифра, 3 цифра, 4 цифра">
</map>
</div>
Давайте теперь разберемся во всем:
width: 1000px - ширина самого изображения главного меню. В данном ниже примере его ширина равняется 1000 пикселей.
url изображения меню - код изображения главного меню. Вам нужно загрузить это изображение в файловый менеджер, щелкнуть на него и скопировать его код.
Для примера я загрузила вот это изображение главного меню (щелкните для увеличения):
Как видите, здесь обозначены пункты меню, нажатие на которые должно открывать соответствующие разделы (например, вы нажимаете левой кнопкой мыши на надпись "О сериале" и попадаете на страницу об этом сериале).
код ссылки на пункт 1 - ссылка на страницу первого пункта (в данном примере, ссылка на главную страницу)
код ссылки на пункт 2" - ссылка на страницу 2 пункта (на страницу о сериале а данном примере) и т.д.
Также на примере я обозначила границу области, нажатие ЛКМ в пределах которой приведет вас именно на страницу о сериале. Такую же границу я выделила для Пункта 1 (для др. пунктов я область выделять не стала для экономии времени). Запомните, размер этих границ вы задаете сами по своему усмотрению!
Теперь пришло время поговорить о навигационных картах. Чтобы проще понять, что это такое, можно сказать, что это изображение (или какая-то область на изображении), которая служит ссылкой. Например, выделенная граница для пункта 1 является навигационной картой, приводящей нас на главную страницу и т.д. На нашем сайте также главное меню сделано по типу навигационных карт. Но как сделать так, чтобы неподвижная надпись на картинке вдруг стала ссылкой? Для этого нужно немного вспомнить математику. Наверное, вы знаете о таком понятии, как система координат, в которой две прямых пересекаются под прямым углом. Горизонтальная линия - ось Х, вертикальная - осу У. Для того чтобы задать границу навигационной карты (области, служащей ссылкой) в пикселях, нужно определить координаты 2 точек: вершину левого верхнего и вершину правого нижнего углов этой области. Как вы, наверное, знаете, каждая координата точки имеет 2 цифры: по оси Х и по оси У. За точку отсчета координат принимается вершина левого верхнего угла самого изображения главного меню. Значит, координаты этой точки равны 0px, 0px. Теперь определим координаты вершины левого верхнего угла нашей навигационной карты для Пункта 1. Сразу скажу, что лучше всего это делать с помощью Фотошопа (с помощью инструмента "Рамка"). В нашем примере точка вершины левого верхнего угла нашей выделенной области (навигационной карты) имеет координаты 104px (по оси X) и 0px по оси (У). Далее определяем координаты для правого нижнего угла. В нашем примере они равны 272px и 105px.
Теперь обратимся к html-коду:
1 цифра, 2 цифра, 3 цифра, 4 цифра - это как раз координаты, которые мы только что определили. Первые 2 цифры - координаты для левого верхнего угла навигационной карты, вторые 2 - для правого нижнего.
Касаемо нашего примера, это будет выглядеть так: 104px, 0px, 272px, 105px.
То же самое проделываем с остальными пунктами.
Вот и все! Мы с вами освоили навигационные карты.Это только кажется долго и сложно, на самом деле это довольно просто, особенно когда часто практикуешься.
Запомните, что навигационную карту можно сделать на любом изображении. Например, в нынешнем дизайне нашего сайта навигационные карты сделаны на самом изображении шапки (кружочки с надписями). И это только с помощью оси координат!
Теперь последнее, что вам нужно сделать: вы только что создали главное меню для вашего сайта, но это меню видно только на главной странице и страницах, которые вы сами создаете с помощью Редактора страниц. Если вы зайдете, например, на форум, то главное меню исчезнет. Чтобы оно у вас было везде, вставьте код главного меню во все шаблоны, в которых есть похожий код (это самый первый код нашего урока) :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
<?$META_KEYWORDS$?>
<link type="text/css" rel="StyleSheet" href="/.s/src/css/823.css" />
</head>
<body>
$ADMIN_BAR$
<div id="wrap">
<div id="contanier">
<table class="main-table">
<tr>
<td class="data-block">$WDAY$<br>$DATE$<br>$TIME$</td>
<td class="login-block"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!--<s3167>-->Группа<!--</s>--> "<u>$USER_GROUP$</u>"<?else?><!--<s5212>-->Приветствую Вас<!--</s>--> <b>$USERNAME$</b><?endif?><br><?endif?><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a><?else?> | <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a><?endif?> <?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a><?else?> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$">RSS</a><?endif?></td>
</tr>
<tr>
<td class="side-block">
<!-- <sblock_menu> -->
<?if($SMENU_1$)?>
<table class="boxTable"><tr><td class="boxContent"><!-- <bc> -->$SMENU_1$<!-- </bc> --></td></tr></table>
<?endif?>
<!-- </sblock_menu> -->
$GLOBAL_CLEFTER$
</td>
<td class="content-block">
<h1 class="logo"><!-- <logo> -->Мой сайт<!-- </logo> --></h1>
<div class="text-block">
<!-- <middle> -->
<?if($MODULE_NAME$)?><h1 class="module-name">$MODULE_NAME$</h1><?endif?><!-- <body> -->$CONTENT$<!-- </body> -->
<!-- </middle> -->
</div>
</td>
</tr>
</table>
$GLOBAL_BFOOTER$
</div>
</div>
</body>
</html>
Зайдите в Управление дизайном - Редактирование шаблонов и просмотрите все шаблоны, вставляя в нужные код главного меню.
Вот и все! Вы научились создавать главное меню с помощью навигационных карт, друзья! Надеюсь, для вас это было интересно, полезно и несильно сложно! А наш урок завершен. Спасибо за внимание и удачи!
| 
