Сохранение экранного пространства и предотвращение перегруженности ссылками с помощью форм

Другой методикой, которую можно применять, является создание формы, использующей элемент select. Можно определить различные страницы как варианты выбора в элементе select, и посетители смогут выбрать вариант и затем отправить форму, чтобы перейти на другие страницы. Код примера работающего меню на базе формы показан ниже.

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

Рис. 23.4. Меню выбора занимает на экране только одну строку

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

Этот код выводит меню с именами групп, которые не являются ссылками выбора, как показано на рис. 23.5:

Эта техника позволяет использовать почти любое доступное пространство, но это означает также, что необходимо иметь серверный сценарий, для отправки посетителей на выбранные ими страницы. Можно использовать также JavaScript, чтобы заставить ссылки работать, но невозможно полагаться на то, что JavaScript будет доступен - необходимо убедиться, что пользователи могут также использовать меню при отключенном JavaScript. Другое, менее очевидное преимущество состоит в том, что вы предлагаете не слишком много ссылок в документе. Это означает, что пользователи вспомогательных технологий не будут перегружены (которые часто будут иметь ссылки, представленные одним большим списком). Это означает также, что поисковые системы не рассматривают ссылки на странице бесполезными, так как отношение ссылок к тексту делает документ похожим на схему сайта. Однако многие вспомогательные технологии могут создавать карту ссылок ваших страниц; если все ваши важные ссылки находятся в меню выбора, есть вероятность, что посетитель может никогда не столкнуться с ними. Поэтому лучше предложить анкерные ссылки на основные страницы, и меню с элементом select, чтобы предложить дополнительные возможности. Посетители смогут использовать их, но роботам поисковых систем не нужно знать об их существовании.

Рис. 23.5. Меню выбора могут иметь группы вариантов выбора, которые позволяют сообщить посетителям, какие варианты близки друг другу

Последнее, что надо упомянуть в отношении меню HTML, состоит в том, что размещение меню играет большую роль. Рассмотрим посетителей, которые не имеют механизма прокрутки, или могут не видеть, и поэтому полагаются на клавиатурную навигацию для перемещения по сайту. Первое, что они встречают, когда загружают документ, это его размещение и заголовок; затем документ считывается сверху вниз, останавливаясь на каждой ссылке, чтобы спросить посетителя, не хочет ли он последовать по этой ссылке или нет. Другая возможность состоит в получении списка всех ссылок или переход по заголовкам. Если меню находится в начале документа, то это будет первое, что встретит пользователь. Необходимость пропустить от 15 до 20 ссылок, прежде чем появится какой-либо контент, может быть на самом деле достаточно неприятной. Есть две возможности обойти это. Первое, можно разместить меню после основного контента документа (вы можете все равно поместить его вверху экрана с помощью CSS, если захотите). Второе, можно предложить ссылку для обхода. Ссылки обхода являются просто ссылками, помещаемыми перед основным меню, которые указывают на начало контента, позволяя посетителю перепрыгнуть через меню и сразу перейти к контенту, если он захочет. Можно добавить еще одну ссылку "перейти к меню " в конце документа, чтобы облегчить возвращение в начало. Рассмотрим, для примера, следующий код со ссылкой обхода:

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

В этом руководстве были рассмотрены различные типы меню, которые, скорее всего, придется создавать в HTML. Были рассмотрены следующие вопросы:

· Почему списки с анкерами являются прекрасной конструкцией HTML для определения меню.

· Почему важно не рассматривать меню как окаменевшую конструкцию, но предполагать и планировать вместо этого изменения.

· Навигация по странице: соединение с разделами текущего документа и возврат в меню.

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

· Контекстная навигация: предложение ссылок на связанные страницы в других местах сайта (или на других сайтах).

· Схемы сайтов: в качестве инструмента опоры и для ориентации посетителей, которые чувствуют себя потерявшимися на сайте или пришли с определенной целью.

· Нумерация страниц: средство, позволяющее посетителям перемещаться по документу, разбитому на несколько страниц.

· Карты ссылок: создание графических меню, используя наложение изображений с горячими точками

· Меню на основе форм: предоставление множества вариантов выбора, не используя большого пространства и не перегружая посетителей и поисковые системы слишком большим количеством ссылок.

Мы вернемся к некоторым из этих тем позже в разделе CSS этого курса, чтобы посмотреть, как лучше представить эти конструкции HTML, чтобы они стали еще более очевидными для посетителей в качестве меню.

· Почему разметка меню в виде списков является удачной конструкцией?

· Что необходимо планировать на будущее при проектировании меню навигации?

· В чем преимущество использования элементов select для меню, и в чем проблемы?

· Что определяют с помощью элементов area, и что такое атрибут nohref элемента area (это здесь не рассматривалось, необходимо выполнить некоторый поиск в сети)

· В чем преимущество использования обхода ссылок?

Аннотация: Как лучше всего начать проверку страниц HTML и гарантировать, что эти страницы будут выводиться правильно в различных браузерах, без каких-либо ошибок? Ответом является валидация (проверка на соответствие правилам). О ней и пойдет речь

Итак, вы написали несколько страниц HTML, и они, кажется, выводятся нормально, но имеется несколько не совсем правильных вещей. Как лучше всего начать поиск того, что неправильно, и гарантировать, что эти страницы (и написанные в будущем страницы) будут выводиться правильно в различных браузерах, без каких-либо ошибок? Ответом является валидация (проверка на соответствие правилам)! Существует много доступных средств на сайте W3C и в других местах, которые позволяют выполнить валидацию кода сайта.

Наиболее известными валидаторами являются следующие:

· W3C MarkUp Validator (http://validator.w3.org/): Этот валидатор находит используемый в проверяемом документе doctype (X)HTML, и просматривает затем весь документ, указывая места, где код HTML не соответствует используемому doctype (т.е., где имеются ошибки кода HTML).

· W3C Link Checker (http://validator.w3.org/checklink): Этот валидатор просматривает документ, представленный для проверки, и проверяет все ссылки в документе, чтобы гарантировать отсутствие неработающих ссылок (у которых значения href указывают на несуществующие ресурсы).

· W3C CSS Validator (http://jigsaw.w3.org/css-validator/): Как можно догадаться, этот валидатор просматривает документ CSS (илиHTML/CSS) и проверяет, что CSS соответствует спецификациям CSS.

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

· Различные браузеры интерпретируют неправильный код HTML по разному

В программировании компьютеров существует, вообще говоря, два вида проблем кода:

· синтаксические ошибки - когда ошибки в записи кода не позволяют компьютеру правильно выполнить или скомпилировать программу.

· ошибки программирования (или логики) — когда код не полностью отражает замысел программиста.

В большинстве языков программирования ошибки первого рода достаточно легко обнаружить - программа просто отказывается выполняться или компилироваться, пока ошибка не будет исправлена. Это делает поиск и исправление таких ошибок значительно проще в ситуациях "почему она не делает то, что я хочу". HTML не является языком программирования. Синтаксические ошибки на Web -странице обычно не ведут к тому, что Web - браузер отказывается открыть страницу (хотя XHTML является более строгим, чем HTML -- по крайней мере, когда обрабатывается как данныеapplication/xhtml+xml или text/xml, как и должно быть - и некоторые doctype запрещают использование определенных типов элементов HTML). Это является одной из основных причин быстрого принятия и распространения Web. Первый браузер Web, WorldWideWeb (http://www.w3.org/People/Berners-Lee/WorldWideWeb.html) написанный Тимом Бернерс-Ли, был также редактором, позволявшим людям создавать Web -страницы, не изучая сначала HTML. Этот редактор создавал неверный HTML. Это можно было бы исправить, но был создан важный прецедент, который существует во всех браузерах Web до сегодняшнего дня - суть которого в том, что предоставление людям доступа к контенту важнее, чем сообщение об ошибках людям, которые их не понимают или не могут их исправить.

Хотя браузеры Web будут принимать плохие (недействительные в нашей терминологии) Web -страницы и делать максимум возможного для визуализации кода, делая наилучшие предположения о намерении автора, тем не менее, можно проверить, был ли HTML написан правильно, и на самом деле это нужно делать, как мы увидим ниже. Мы называем этот процесс "валидацией" HTML. Программа валидации сравнивает код HTML на странице Web с правилами сопровождающего doctype и сообщает, какие правила и где были нарушены.

Существует распространенное мнение среди некоторых Web -разработчиков, что если Web -страница выглядит в браузерах хорошо, то не имеет значения, что ее валидация не была выполнена. Они называют валидацию идеальной целью, но не чем-то, что является черно-белой проблемой. Существует некоторая доля истины в таком подходе, спецификация HTML не является совершенной, и сейчас существенно устарела. Некоторые вещи, которые, возможно, правильны (такие как начало упорядоченного списка в точке, отличной от 1) являются недействительными в HTML. Однако как говорит пословица:

Учите правила, чтобы знать, как нарушать их правильно

Существует две крайне важные причины для валидации кода HTML при его создании.

· Человек не совершенен, как и создаваемый им код — все делают ошибки, и Web -страницы будут более высокого качества (т.е., работать более согласованно), если выполоть все ошибки.

· Браузеры изменяются. В будущем браузеры, скорее всего, будут менее снисходительны при синтаксическом анализе недействительного кода.

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

Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...

ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: