Приложение Д: учебник html код, навигация сайта, html меню

Последняя модификация: 04.07.2008 г

Страница загружена с адреса: http://webdesign.site3k.net/conjuncture/append/d/menus.html

Организация ссылок. Всевозможные оглавления.

Ссылки по кругу
Стандартное оглавление
Перемещающееся меню
Внедряемое плавающее оглавление
Скроллируемое перемещаемое меню
Меню из встроенных рамок IFRAME
Меню из объектов
Объектно-рамочное меню

Организация системы навигации по страницам сайта не является чем-то настолько сложным, чтобы этот вопрос требовал отдельного рассмотрения, но великое множество различных способов ее организации приводит к желанию рассмотреть все их достоинства и недостатки. Сразу оговорюсь: здесь будут рассмотрены только универсальные способы организации оглавлений. Оглавления, создаваемые с помощью CGI-скриптов, нуждающиеся в серверной поддержке не рассматриваются. Один сервер поддерживает одни языки CGI, другой – другие, третий не поддерживает их вообще. Поэтому, написание таких скриптов всегда опирается на возможности конкретного сервера и не может считаться универсальным. Вообще же, я рекомендовал бы держаться от них подальше, потому что, вставив их туда, где можно обходиться без них, человек оказывается в большом затруднении, если ему приходится менять хостинг. К тому же, парочка таких скриптов с ошибками легко могут повесить сервер, а администрация этого не любит. Поверьте, навигация по сайту не нуждается в CGI-программировании, и вскоре вы в этом убедитесь.

Ссылки по кругу.

Ссылки по кругу, где каждая страница ссылается на следующую и предыдущую, является наиболее простым способом организации навигации. Общий синтаксис таких ссылок имеет следующий вид:

<P><a href="Круговое меню 3.html" title="По кругу">Назад</a> <a href="Круговое меню 2.html"  title="По кругу">Вперед</a>

Смотреть

Этот способ хорошо применим для небольшого цикла статей, объединенных общей тематикой, но не подходит для серфинга по большому числу страниц в связи с необходимостью совершить большое число переходов, в поисках нужной страницы, о существовании которой, к тому же, ничего не известно. При организации ссылок по сайту, он может быть применен только в дополнение к основному способу навигации.

Стандартное оглавление.

Стандартное оглавление, помещаемое в начале документа, свойственное печатным изданиям очень подходит для организации быстрого перехода к определенному разделу текущего документа, для чего разделы отмечаются якорями типа <A name=1> (см. документацию по HTML), а пункты оглавления ссылаются на эти якоря:

<P><a href="#1">Синий Веб-дизайн</a>
<P><a href="#2">Красный Веб-дизайн</a>
<P><a href="#3">Зеленый Веб-дизайн</a>

Смотреть

При достаточно длинном оглавлении, для посетителя может быть удобным, если оно вынесено в сторону. Тогда, загрузив страницу, он видит не только оглавление, которое могло бы не вместиться в видимую часть документа, но и часть самого текста. Вынести оглавление в сторону можно:

Поместив весь документ, ниже заголовка в таблицу из двух столбцов, один из которых будет содержать оглавление, а другой – основной текст. <table valign=top> <tr><td> <P><a href="#1">Синий Веб-дизайн</a> <P><a href="#2">Красный Веб-дизайн</a> <P><a href="#3">Зеленый Веб-дизайн</a> <td> Остальной документ </table>
Смотреть
Поместив его в блок div с атрибутом Float:left (см. документацию по CSS) <div style="Float:left"> <P><a href="#1">Синий Веб-дизайн</a> <P><a href="#2">Красный Веб-дизайн</a> <P><a href="#3">Зеленый Веб-дизайн</a> </div>
Смотреть
Поместив его в блок div с указанием абсолютного позиционирования и величины в пикселях (к сожалению, документацию по CSS2 я еще не перевел), а текст, отодвинув от края с помощью CSS атрибута margin. <div style="position:absolute;top:50px;width:60px;height:100px"> <P><a href="#1">Синий Веб-дизайн</a> <P><a href="#2">Красный Веб-дизайн</a> <P><a href="#3">Зеленый Веб-дизайн</a> </div> <P> <DIV style="margin:0 0 0 60"> Основной текст </div>

Между меню и основным текстом следует вставить абзац, иначе Internet Explorer не отделит разделы.

Последние два способа предпочтительнее, чем деление документа с помощью таблицы. Во-первых, при употреблении большого количества таблиц очень легко запутаться, где начинается одна и заканчивается другая. В результате некоторые Веб-дизайнеры часто теряют заключительные теги таблиц. IE это воспринимает корректно, а, например, в Опере картинка искажается. И это не проблема Оперы – по определению завершающие теги должны быть. А значит, их отсутствие – проблема Веб-дизайнеров. Во-вторых, таблица принимает нормальные очертания только по окончании загрузки и если она велика, посетителю долго приходится смотреть, как на его экране вылезает корявый текст, что оставляет не лучшее впечатление о сайте. В отличие от таблиц, блоки DIV формируются сразу. В-третьих, при обрыве связи, недогрузив текстовый блок, посетитель потеряет только часть текста, а, недогрузив часть таблицы, потеряет и форматирование.

Вынесенное влево оглавление достаточно удобно даже при большом количестве пунктов и может применяться для довольно больших документов. Но попытка с его помощью организовать ссылки на другие страницы сразу же выявляет его недостатки.

Первый из таких недостатков заключается в том, что по мере чтения, человек удаляется от первых пунктов оглавления и, например, чтобы щелкнуть по ссылке перехода на первый раздел, ему сначала требуется пролистать весь документ к началу – то есть, к этому самому первому разделу. Довольно глупая ситуация.

Помочь в этой ситуации может перемещающееся меню.

Перемещающееся меню.

Для того чтобы меню начало перемещаться по документу, оставаясь на одном и том же месте экрана, достаточно сделать две вещи:

Назначить блоку, его содержащему, идентификатор. Например, id=menu.
Написать скрипт перемещения.

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

<SCRIPT LANGUAGE="JavaScript"> <!--
function move() {menu.style.top=document.body.scrollTop+50 }
window.onresize=move;
window.onscroll=move;
//--></SCRIPT>

Первая строка скрипта объявляет функцию под названием MOVE. Эта функция определяет что, верхняя точка стиля с идентификатором MENU находится на том же расстоянии от начала документа, на которое начало документа, перемещено вверх. Плюс 50 пикселей, для того чтобы уместить заголовок страницы. Две следующие строчки назначают обработчик событий скроллинга и изменения размеров окна. Этим обработчиком становится функция MOVE. Таким образом, как только размер окна изменен или текст прокручен, меню позиционируется в 50 пикселях от верхнего края окна. Меню всегда перед глазами и до него не требуется долго листать.

Мы только что избавились от недостатка, которым страдает 90 % российских сайтов!

Данный механизм не будет работать в Netscape/Mozilla. Для них требуется несколько иной синтаксис. Объектная модель этих обозревателей слишком слаба и, Netscape фактически отказался от ее разработки. Новые версии Netscape (с 2005 года), утратили самостоятельность и превратились в надсткойку над ядром эксплорера, получив его функциональность. Однако для старых версий придется использовать адаптированный синтаксис. В часности, перед определением нового положения меню, портебуется получить его свойства с помощью команды

mymenu=eval("document.getElementById('menu')");

А затем обращатся к не к самому объекту menu, а к переменной, содержащей ссылку на этот объект:

mymenu.style.top=document.body.scrollTop+50

Этот синтаксис работает и в эксплорер, так что, им можно полностью заменить предыдущий текст.

Так же, всвязи с тем что, Netscape не генерирует scroll если прокрутка идет с клавиатуры или колесом мыши, придется добавить обработчики событий

window.onkeyup=move;

window.onfocus=move;

window.onblur=move;

С помощью дополнительных обработчиков отсутствие событий частично компенсируется реакцией на потерю и получение фокуса (после скролинга колесом миши следует щелкнуть по документу).

В итеге получается следующий текст, подходящийдля любого обозревателя:

<SCRIPT LANGUAGE="JavaScript"> <!--
function move() {
   mymenu=eval("document.getElementById('menu')"); 
   mymenu.style.top=document.body.scrollTop+50 
}
window.onresize=move;
window.onscroll=move;
window.onkeyup=move; 
window.onfocus=move; 
window.onblur=move;
//--></SCRIPT>

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

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

Внедряемое плавающее оглавление.

Для того чтобы оглавление внедрялось в документ, вместо меню и функции перемещения, в месте внедрения требуется вставить следующий код:

<SCRIPT LANGUAGE="JavaScript" src="menu.js"></SCRIPT>

Все остальное будет находиться в файле menu.js и, при необходимости отредактировать меню, мы будем редактировать только его. При этом файл menu.js имеет примерно такое содержание (с учетом особенностей Нетскейпа):

function move() {
   mymenu=eval("document.getElementById('menu')"); 
   mymenu.style.top=document.body.scrollTop+50 
}
window.onresize=move;
window.onscroll=move;
window.onkeyup=move; 
window.onfocus=move; 
window.onblur=move;
document.writeln('<div id=menu style= "position:absolute; top:50px; width:60px; height:100px">');
document.writeln('<P><a href="Плавающее оглавление 1.html">Синий Веб-дизайн</a>');
document.writeln('<P><a href="Плавающее оглавление 2.html">Красный Веб-дизайн</a>');
document.writeln('<P><a href="Плавающее оглавление 3.html">Зеленый Веб-дизайн</a>');
document.writeln('</div>');

Команды document.writeln записывают требуемые строки в то место документа, в котором стоит скрипт и, в результате, меню формируется динамически, как при SSI технологиях, только не зависимо от серверной поддержки. Этот метод не занимает лишнего процессорного времени на сервере и, в отличие от SSI-технологий не замедляет его работу. Владельцы хоста рады, мы тоже.

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

<!--#include file="file.txt"-->

Кажущейся более компактной и ссылающейся на еще более компактный файл, в котором, вместо

document.writeln('<P><a href="Плавающее оглавление 1.html">Синий Веб-дизайн</a>');

Были бы только

<P><a href="Плавающее оглавление 1.html">Синий Веб-дизайн</a>

При загрузке следующей страницы, серверу пришлось бы заново внедрять меню, увеличивая объем выдаваемого файла и замедляя его загрузку (подробно о SSI-технологии см. ssi.html). Если же мы делаем это с помощью JavaScript, файл с меню не закачивается заново, а берется из кеша, и на внедрение меню тратятся считанные наносекунды. Переход от одного файла к другому происходит значительно быстрее.

Смотреть

Конечно, по ссылкам, создаваемым JavaScript не смогут пойти поисковые машины, что удается избежать при SSI-внедрении, поскольку тогда сервер приклеит меню и для них. Но если меню создается не для машин, а для людей, JavaScript оказывается гораздо эффективней. А для того, чтобы направлять роботов, можно собрать обычные ссылки в специальном файле карты сайта.

Однако вскоре мы обнаруживаем очередной недостаток: При большом меню, оно не вмещается полностью на экран и его автоматическое позиционирование начинает мешать. Вот если бы оно еще и прокручивалось…

Нет проблем, достаточно в определение DIV добавить параметр overflow:scroll (прокрутка при переполнении). Например:

document.writeln('<div id=menu style= "position:absolute; top:50px; width:60px; height:100px; overflow:scroll">');

Однако корректировать меню, рисуемое с помощью скрипта, не очень удобно. Хотелось бы избавиться от команд "document.writeln" и некоторых других особенностей скрипта. Чтобы все было так же просто, как при SSI-внедрении.

Так вот же оно, вожделенное:

Скроллируемое перемещаемое меню.

Помещаем в документ следующий код:

<SCRIPT LANGUAGE="JavaScript">
function move() {menu.style.top=document.body.scrollTop+50 }
window.onresize=move;
window.onscroll=move;
</SCRIPT>
<div id=menu style="position:absolute;width:100px;height:200px">
<IFRAME src=object.html width="100%" height="100%" frameborder="1"></IFRAME>
</div>

В этом коде у нас появился некий IFRAME, src которого указывает на object.html . IFRAME – это встроенная рамка (см. документацию по HTML 4.0). Содержание которой задается файлом object.html. Он, в свою очередь является обычной веб-страницей, содержащей оглавление. Целевым кадром (target) для ссылок этого оглавление должен быть _parent. То есть target="_parent".

В Нетскейпе не удается перепозиционировать IFRAME ренее приведенным способом (DIV перемещается, но встроенный в него фрейм остается на месте), поэтому скрипт упрощен до варианта, достаточного Эксплореру и Опере.

Это меню не только не требует редактирования всех файлов, при необходимости обновления (редактируется только object.html), не только всегда остается видимым, но и прокручивается, что позволяет использовать в нем тексты любой длинны. И представляет собой обычную веб-страницу, со всеми вытекающими отсуда преимуществами.

Смотреть

Однако, взявшись за эксплуатацию IFRAME, можно совсем отказаться от скриптов и создать две панели, одна из которых будет навигационной, а другая – содержательной.

Меню из встроенных рамок IFRAME.

Файл с меню из встроенных рамок имеет примерно следующий вид:

<html>
<head>
  <TITLE>Рамочное меню 1</TITLE>
</head>
<BODY BGCOLOR="#666699">
<IFRAME align=Left name=Frame2 src=LeftTram.html width="25%" height="100%" frameborder="1">
</IFRAME>
<IFRAME align=Right name=Frame3 src="RightFrm.html" width="73%" height="100%" frameborder="1">
[Ваш агент не поддерживает фреймы или сконфигурирован так, чтобы не отображать их.]
</IFRAME>
</BODY>
</html>

В качестве цели, для гиперссылок оглавления выбирается Frame3.

Смотреть

При желании, перед объявлением фреймов, можно поместить логотипы сайта, а после них, поместить дополнительную информацию. Тогда страница рамок будет иметь собственную ценность. На лицо – идеальная система организации навигации по сайту.

Однако в Mozilla оно выглядит не так как в IE. Mozilla не хочет признавать задание величины рамок в процентах и дает им свои, произвольные размеры. Задание же величины в пикселях, которым страдают некоторые, отнюдь не дальновидные, дизайнеры, глупо. Откуда нам знать, сколько пикселей будет на экране у посетителя?

Поэтому применим не IFRAME, а объекты. Mozilla работает с ними вполне корректно.

Меню из объектов.

Файл с меню из объектов имеет следующий вид:

<html>
<head>
  <TITLE>Объектное меню 1</TITLE>
</head>
<BODY BGCOLOR="#666699">
<OBJECT align=Left name="Frame2" data="LeftTram.html" type="text/html" border="1" width="25%" height="100%"></OBJECT>
<OBJECT align=Right name="Frame3" data="RightFrm.html" type="text/html" border="1" width="73%" height="100%"></OBJECT>
</BODY>
</html>

Фактически это те же встроенные кадры, только вместо IFRAME применяется OBJECT (с указанием типа объекта type="text/html"), а вместо src используется data. В Mozilla работает безупречно. Но что происходит в IE?

Смотреть

Просто ужас. IE не хочет признавать права объектов на имена и выделяет для второго объекта не 73% от общей величины окна, как Mozilla или Опера, а 73% от оставшегося после первого объекта места!

Конечно, все в этой жизни решаемо, и одним из способов решить данную нестыковку обозревателей, является комбинирование объектов со встроенными рамками.

Объектно-рамочное меню.

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

<html>
<head>
  <TITLE>Объектно-рамочное меню</TITLE>
</head>
<BODY BGCOLOR="#666699">
<SCRIPT LANGUAGE="JavaScript"> <!--
if (navigator.appName == "Netscape") {
 document.writeln('<OBJECT align=Left name="Frame2" data="LeftTram.html" type="text/html" border="1" width="25%" height="100%"></OBJECT>');
document.writeln('<OBJECT align=Right name="Frame3" data="RightFrm.html" type="text/html" border="1" width="73%" height="100%"></OBJECT>');
} else {
document.writeln('<IFRAME align=Left name=Frame2 src=LeftTram.html width="25%" height="100%" frameborder="1"></IFRAME>');
document.writeln('<IFRAME align=Right name=Frame3 src="RightFrm.html" width="73%" height="100%" frameborder="1">[Ваш агент не поддерживает фреймы или сконфигурирован так, чтобы не отображать их. Однако Вы можете просмотреть этот документ, используя  <A href="Left.html">ссылку.</A>]</IFRAME>');
} // --> </SCRIPT>
</BODY>
</html>

Функция navigator.appName определяет тип браузера и, если это Netscape (Mozilla), создает объекты, а иначе, создает IFRAME. Довольно универсальное решение. Мы получаем единственный файл оглавления, избавляющий нас от необходимости переделывать весь сайт ради добавления одного пункта, оглавление всегда перед нами и нам не требуется листать страницу, чтобы до него добраться. Оглавление можно прокрутить и, даже длинное оглавление, не создает никаких неудобств.

Смотреть

Только для чего все эти сложности со скриптами? Не лучше ли сразу применить внешние FRAME, корректно работающие и в Опере (в ней все корректно работает), и в Mozilla, и в IE?

Вопрос конечно интересный. Лично я выбрал внешние FRAME (подробно о преимуществах фреймов см. в Если вам не нравятся фреймы, значит вы не умеете их готовить.).

Смотреть? ☺

Не менее интересно многоуровневое раскрывающееся меню и Меню из выпадающих списков. А о способах изменить вид самих ссылок и способы открытия страниц, можно узнать из «Ссылки и окна. Внешний вид и внутреннее содержание».

Комментарии к странице (всего 3)

Меню Серфинг. Навигация по сайту. html скачать учебник html код html. организация навигации сайта.