Сайт о правильных сайтах







Введение

В идеале — об этом можно прочесть у Якоба Нильсена (Jakob Nielsen), одного из ведущих мировых специалистов в области проектирования пользовательских интерфейсов — навигация сайта должна в любой момент предоставлять посетителю четкие ответы на три вопроса: «Где я нахожусь?», «Где я уже был?» и «Куда я могу отсюда пойти?»

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

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

Так, все средства навигации можно подразделить на внутренние и внешние (по отношению к данному сайту), и лишь внутренняя навигация представлена гиперссылками, размещенными на страницах сайта, тогда как навигация внешняя, «неофициальная», сопряжена со свободой перемещений, предоставляемой пользователю программой-клиентом, то есть браузером.

Конопка Назад — безусловный лидер, её нажимают на порядок чаще, чем соседнюю Вперёд. Помимо этих двух кнопок к средствам внешней навигации можно отнести адресную и статусную строки браузера, а также заголовок его окна.

Внутренняя навигация неоднородна сама по себе. Первое, на что обращает внимание посетитель — обособленный навигационный блок, где представлены ссылки на базовые разделы сайта. Это "парадная", магистральная, основная часть системы навигации. Но на страницах сайта пользователь может встретить и вспомогательные элементы навигации— например, ссылки с надписями: "К предыдущему разделу", "К следующему разделу", "На уровень вверх", "В начало" и т. д.

Внутренняя навигация

Считается, что семью объектами, ограничивается объём восприятия среднестатистического человека, при этом совокупность элементов ещё воспринимается как единое целое. Если количество основных разделов существенно "зашкаливает" за семь, логическую структуру следует пересмотреть, укрупнив некоторые разделы. При этом логическую структуру придётся сильно развить в глубь.

Дерево логической структуры—почти готовая карта сайта. На крупных веб-ресурсах, иерархия структуры которых имеет более трёх уровней вложенности, карта сайта (страница с которой одним щелчком мыши можно попасть на любую другую страницу) должна быть обязательным атрибутом.

Если в качестве кнопок навигации используются графические изображения, то их требуется безусловно снабжать содержательными alt-текстами. Нужно обязательно проверять, легко ли работать с сайтом при отключённой графике.

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

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

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

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

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

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

Внешняя навигация

Не следует пренебрегать стандартными элементами интерфейса браузеров, намерено блокировать работу кнопки Назад при помощи JavaScript.

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

http//www.webdevlibrary.ru/css2/boxes/positioning/absolute.html

Помимо чисто справочной роли, URL такого вида вполне может использоваться для передвижения по сайту. Посетитель, сократив этот адрес, скажем до вида http//www.webdevlibrary.ru/css2/, сможет при помощи одного шелчка мыши попасть на страницу оглавления раздела, посвящённого технологии CSS2, которая находится тремя уровнями выше. Изменив absolute.html на relative.html, посетитель сможет перейти к статье, касающейся другой темы, не пользуясь для этого внутренней навигацией сайта.

Чрезвычайно важное значение при ответе на вопрос "Где я нахожусь?" имеет заголовок окна браузера, который отображает информацию, содержащуюся внутри контейнера <title>...</title> HTML-кода веб-страницы. На главной странице, помимо названия сайта, в заголовке окна должно фигурировать описание ресурса. На внутренних страницах содержимое заглавия должно отражать положение того или иного подраздела в иерархической структуре сайта. Следует обратить внимание на то, что в заглавии внутренней страницы сайта непременно должны присутствовать как название самой страницы, так и название сайта в целом. Причём название страницы лучше всего размещать на первом месте, поскольку, скажем в Панели задач Windows отображается кнопка, содержащая лишь первые несколько символов заголовка окна, и, если в разных окнах открыто несколько страниц одного и того же сайта, идентифицировать то или иное окно по кнопке в Панели задач будет значительно легче.

Интерактивное меню навигации

К гиперссылкам, как и другим элементам, применимы многие рассмотренные CSS свойства, например, color, background, font, text-decoration, border и т. д.

В CSS предусмотрены псевдоклассы link и visited, позволяющие строить селекторы, соотносящиеся соответственно с непосещёнными и посещёнными ссылками. Имена псевдоклассов записываются с использованием символа двоеточия:

a {text-decoration: none} — это правило относится ко всем гиперссылкам.

a:link {color: #036} — это правило определяет цвет непросмотренных гирессылок.

a:visited {color: #999} — это правило задаёт цвет просмотренных гиперссылок.

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

Помимо двух перечисленных выше, CSS предусматривает три динамических псевдокласса, позволяющих изменять визуальное представление различных элементов (не обязательно гиперссылок) под влиянием тех или иных событий. Так псевдокласс hover относится к элементам, на которые наведён курсор мыши или иного указательного устройства; псевдокласс active сопоставляется с активизированным (к примеру путём нажатия на кнопку мыши) пользователем элементами; а псевдокласс focus определяет элементы, сфорусированные (выделенные) посредствам клавиатуры или иных способов текстового ввода.

Динамические псевдоклассы применительно к гиперссылкам можно использовать в сочетании с псевдоклассами link и visited, к примеру, так:

a:link:hover {text-decoration: underline; color: #369}

a:visited:hover {text-decoration: underline; color: #666}

Кроме того, динамические псевдоклассы могут комбинироваться друг с другом:

a:focus:hover {background: #fff0cc}

Представляется разумным определять различные правила представления для элементов, заданных селекторами a:link, a:visited, a:hover и a:active в основном тексте страниц. Для ссылок же "магистрального" меню вполне достаточно указать всего два правила — для элементов, сопоставленных с селекторами 1. a:link, a:visited и 2. a:hover, a:active.

Примеры создания меню навигации

Ниже приводится пример вертикальной панели навигации на основе списка. При объединении ссылок и списков для создания панели навигации мы избавимся от маркеров, воспользовавшись свойством list-style-type и значением none. Это объявление удалит все маркеры, оставив список ссылок, как показано в примере:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

<title>css menu</title>

  <style type="text/css">

body{

  font: 14px Georgina, Times, serif;

  color:black;

   }

ul{

  list-style-type:none;

  paddig:0px;

  width:100px;

  border:2px solid #b22222;

   }

li{

  padding-left:5px;

  padding-bottom:5px;

  border-bottom:2px solid #b22222;

   }

a{

  color:#b22222;

  text-decoration:none;

   }

 a:link{

  color:#b22222;

   }

a:visited{

  color:#808080;

   }

a:hover{

  color:fuchsia;

  text-decoration:underline;

   }

a:active{

  color:red;

   }

</style>

</head>

<body>

 <ul>

  <li><a href="home.html">home</a></li>

  <li><a href="product.html">product</a></li>

  <li><a href="services.html">services</a></li>

  <li><a href="about.html">about us</a></li>

  <li><a href="contact.html">contact</a></li>

 </ul>

</body>

</html>

пример вертикального меню на основе списка

Ниже приводитя пример раскрывающегося вертикального меню с использованием возможностей языка JavaScript:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

  <title>раскрывающееся меню</title>

<style>

<!--

#foldheader{cursor:hand;

   font-weight:bold;

  list-style-image: url(f1.gif);

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 11px;

  margin-top: 3px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 0px;

  color: #FF6600;

   }

#foldinglist{list-style-image: url(open.gif);

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 11px;

  margin-top: 3px;

  margin-right: 0px;

  margin-bottom: 0px;

  margin-left: 7px;

   }

 -->

</style>

<script language="JavaScript1.2">

<!--

var head="display:''"

  img1=new Image()

  img1.src="f1.gif"

  img2=new Image()

  img2.src="f2.gif"

function change(){

  if(!document.all)

  return

  if (event.srcElement.id=="foldheader") {

  var srcIndex = event.srcElement.sourceIndex

   var nested = document.all[srcIndex+1]

  if (nested.style.display=="none") {

  nested.style.display=''

  event.srcElement.style.listStyleImage="url(f2.gif)"

   }

  else {

  nested.style.display="none"

  event.srcElement.style.listStyleImage="url(f1.gif)"

   }

   }

   }

document.onclick=change

 //-->

</script>

</head>

<body>

 <li id="foldheader">Гуманитарные</li>

 <ul id="foldinglist" style="display:none">

  <li><a href="">Литература</a></li>

  <li><a href="">История</a></li>

  <li><a href="">Обществознание</a></li>

  <li><a href="">Английский</a></li>

 </ul>

 <li id="foldheader">Точные></li>

 <ul id="foldinglist" style="display:none">

  <li><a href="">Математика</a></li>

  <li><a href="">Физика</a></li>

  <li><a href="">Химия</a></li>

 </ul>

 <li id="foldheader">Развиваюшие</li>

 <ul id="foldinglist" style="display:none">

  <li><a href="">Музыка</a></li>

  <li><a href="">Исскуство</a></li>

  <li id="foldheader">Физкультура</li>

  <ul id="foldinglist" style="display:none">

   <li><a href="">Гимнастика</a></li>

   <li><a href="">Плавание</a></li>

  </ul>

 <li><a href="">Волейбол</a></li>

 <li><a href="">Футбол</a></li>

 </ul>

 </ul>

<script language="JavaScript1.2">

<!--

 function get_cookie(Name) {

  var search = Name + "="

  var returnvalue = "";

  if (document.cookie.length > 0) {

  offset = document.cookie.indexOf(search)

  // if cookie exists

  if (offset != -1) {

  offset += search.length

  // set index of beginning of value

  end = document.cookie.indexOf(";", offset);

  // set index of end of cookie value

  if (end == -1) end = document.cookie.length;

  returnvalue=unescape(document.cookie.substring(offset, end))

   }

   }

  return returnvalue;

   }

 if (get_cookie(window.location.pathname) != ''){

  var openresults=get_cookie(window.location.pathname).split(" ")

  for (i=0 ; i < openresults.length ; i++){

  foldinglist[openresults[i]].style.display=''

  document.all[foldinglist[openresults[i]].sourceIndex -

  1].style.listStyleImage="url(open.gif)"

   }

   }

 if (document.all){

  var nodelength=foldinglist.length-1

  var nodes=new Array(nodelength)

  var openones=''

   }

 function check(){

  for (i=0 ; i <= nodelength ; i++){

  if (foldinglist[i].style.display=='')

  openones=openones + " " + i

   }

  document.cookie=window.location.pathname+"="+openones

   }

 if (document.all)

  document.body.onunload=check

 //-->

</script>

</html>

пример раскрывающегося вертикального меню на основе списка

Следующий пример посвящён реализации горизонтальной панели навигации на основе списка с использованием цвета. Воспользовавшись объявлением display: inline;, можно сделать так, чтобы списки являлись встроенными, то есть отображались горизонтально, как в нашем примере:


<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

  <title>горизонтальное меню</title>

<style>

body {

  font: 14px Georgia, Times, serif;

  color: black;

   }

ul#navlist {

  margin-left: 0;

  padding-left: 0;

  white-space:nowrap;

   }

#navlist li {

  display: inline;

  list-style-type: none;

   }

#navlist a {

  padding: 3px 10px;

   }

 #navlist a:link, #navlist a:visited {

  color: white;

  background-color: #b22222;

  text-decoration: none;

   }

#navlist a:hover {

  color: #b22222;

  background-color: #ffd700;

  text-decoration: none;

   }

</style>

</head>

<body>

 <div id="navcontainer">

  <ul id="navlist">

   <li><a href="products.html">Products</a></li>

   <li><a href="about.html">About Us</a></li>

   <li><a href="contact.html">Contact</a></li>

  </ul>

 </div>

</body>

</html>

пример горизонтального меню

Шаблон веб-страницы с горизонтальным блоком навигации

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

Второй путь представляется более предподчтительным, прежде всего, по той причине, что он даёт нам возможность указать требуемую ширину лишь единожды. Изменяя одно это значение, мы сможем легко менять ширину шаблона. Ниже приводится код шаблона фиксированной ширины в 600 пикселей. В шаблоне используются два фоновых изображения. В качестве "подложки" используется блок с идентификатором carrier.

Если существует потребность в том, чтобы размеры какого бы то ни было элемента были точными при отображении страницы во всех распространённых сегодня графических браузерах, обычно прибегают к вложенности. В этом случае один блок, для которого определены нулевые значения величины полей и толщины рамки, выступает в качестве "подложки" для другого блока.

Правило body {text-align: center} используется для того, чтобы отцентрировать нашу страницу, но свойство text-align наследуется всеми вложенными элементами, поэтому мы применили "компенсирующее" правило #carrier {text-align: left}. Кроме того, следует обратить внимание, что значение левого и правого отступа для блока carrier должны быть установлены в auto, иначе браузеры не будут центрировать "подложку", так как свойство margin для элементов <div>...</div> по умолчанию равно 0.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

  <title>Правильный сайт</title>

<style type="text/css">

<!--

html, body {

  margin: 0px;

  padding: 0px;

   border: 0px;

   }

body {

  color: #000;

   background: #999 url(bg_page.gif);

  font-family: Georgia, "Times New Roman", Times, serif;

  text-align: center;

   }

#carrier {

  background: #fff;

   width: 600px;

   margin: auto;

   text-align: left;

   }

#header, .menu, #text h2, #footer {

  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

   }

#header, #footer {

  color: #fff;

  background: #369;

  padding: 10px 20px;

   }

#header {

  font-size: 250%;

  margin: 0px;

   }

.menu {

   font-size: 120%;

  background: #fc9 url(bg_nav.gif) center repeat-x scroll;

  border-style: solid none;

  border-width: 2px 0px;

  border-color: #c00;

  margin: 2px 0px;

  padding: 5px 20px;

  text-align: center;

  white-space: nowrap;

   }

#text {

  margin: 20px;

  padding: 20px;

  border: solid 1px #ccc;

   }

#text h2 {

  color: #369;

   }

#text p {

  text-align: justify;

  text-indent: 1.5em;

  margin: 0px;

   }

#footer {

  font-size: 70%;

   }

-->

</style>

</head>

<body>

<div id="carrier">

 <h1 id="header">Правильный сайт</h1>

 <div class="menu">

  <p>Здесь • Будет • Меню • Навигации</p>

 </div>

 <div id="text">

  <h2>Организация пространства страницы</h2>

  <p>Успех будущего веб-проекта во многом определяется качеством исполнения фундамента — шаблонов главной и внутренних страниц сайта. Мы приняли за аксиому тот факт, что все сайты информационного характера (в отличие от презентационных проектов) в значительной мере похожи друг на друга. И общность эта сильнее всего выражена в составе и взаимном расположении элементов страниц.</p>

  <p>В организации пространства страницы любого информационного сайта можно выделить как минимум четыре функциональные области со строго определенными ролями. Это «шапка» (в английской терминологии — header), блок навигации, область основного текста и «подвал» (footer).</p>

 </div>

 <div class="menu">

  <p>Здесь • Будет • Меню • Навигации</p>

 </div>

 <div id="footer">

  <p>© Правильная веб-студия, 2005.<br /><span style="white-space: nowrap">Тел.: (123) 456-78-90.</span></p>

 </div>

</div>

</body>

</html>

шаблон веб-страницы с горизонтальной навигацией

Шаблон веб-страницы с вертикальным блоком навигации

Это шаблон для фиксированной по ширине страницы с вертикально ориентированным блоком навигации и использованием фоновых изображений, который приводится здесь ниже. В этом случае, как и в предыдущем шаблоне, используется "подложка" с идентификатором carrier для всей страницы в целом, обтекаемый блок навигации и сдвинутая на ширину последнего вправо область основного текста. Ширина навигационного блока с учётом полей и рамок установлена 200 пикселей. Блок основного текста принадлежит нормальному потоку. Единственная его особенность — левый горизонтальный отступ, определённый при помощи свойства margin-left и равный 200 пикселям, который отнимает навигационный блок. Если бы этого отступа не было, содержимое элемента text обтекало бы навигационный блок с двух сторон — справа и снизу.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

  <title>Правильный сайт</title>

<style type="text/css">

<!--

html, body {

  margin: 0px;

  padding: 0px;

  border: 0px;

   }

body {

  color: #000;

  background: #999 url(bg_page.gif);

  font-family: Georgia, "Times New Roman", Times, serif;

  text-align: center;

   }

#carrier {

  background: #fff;

  width: 600px;

  margin: auto;

  text-align: left;

   }

#header, #menu, #text h2, #footer {

  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

   }

#header, #footer {

  color: #fff;

  background: #369;

  padding: 10px 20px;

   }

#header {

  font-size: 250%;

  margin: 0px;

   }

#menucarrier{

  width: 200px;

  margin-bottom: 20px;

  float: left;

  background: #fff0cc url(bg_menu.gif) center repeat-y scroll;

   }

#menu {

  font-size: 120%;

  text-align: center;

  padding: 20px;

  border-style: none dotted dotted none;

  border-width: 0px 2px 2px 0px;

  border-color: #c00;

   }

#text {

  margin-left: 200px;

  padding: 20px;

   }

#text h2 {

  color: #369;

   }

#text p {

  text-align: justify;

  text-indent: 1.5em;

  margin: 0px;

   }

#footer {

  clear: both;

  font-size: 70%;

   }

-->

</style>

</head>

<body>

<div id="carrier">

 <h1 id="header">Правильный сайт</h1>

 <div id="menucarrier">

  <div id="menu">

   <p>Здесь</p>

   <p>Будет</p>

   <p>Меню</p>

   <p>Навигации</p>

  </div>

 </div>

 <div id="text">

  <h2>Организация пространства страницы</h2>

  <p>Успех будущего веб-проекта во многом определяется качеством исполнения фундамента — шаблонов главной и внутренних страниц сайта. Мы приняли за аксиому тот факт, что все сайты информационного характера (в отличие от презентационных проектов) в значительной мере похожи друг на друга. И общность эта сильнее всего выражена в составе и взаимном расположении элементов страниц.</p>

<p>В организации пространства страницы любого информационного сайта можно выделить как минимум четыре функциональные области со строго определенными ролями. Это «шапка» (в английской терминологии — header), блок навигации, область основного текста и «подвал» (footer).</p>

 </div>

 <div id="footer">

  <p>© Правильная веб-студия, 2005.<br /><span style="white-space: nowrap">Тел.: (123) 456-78-90.</span></p>

 </div>

</div>

</body>

</html>

шаблон веб-страницы  с вертикальной навигацией




Обновить страницу