Удобная, понятная пользователю навигация - важнейшая составляющая дизайна сайта. В идеале пользователь, попав на любую из страниц вашего сайта, должен суметь сразу сориентироваться, где он находится, и куда ему двигаться дальше.
Система навигации должна быть единой для всех страниц сайта. В этом случае посетитель, даже впервые попав на ваш сайт, сумеет четко сориентироваться уже на второй странице.
Ссылка на главную страницу. Очень желательно иметь ссылку на главную страницу на всех страницах сайта. Общепринятым правилом стало использование логотипа сайта в качестве ссылки на главную страницу.
Навигационная панель сайта или Меню сайта - один из основных функциональных элементов сайта, состоящий из набора ссылок на различные страницы. Каждая такая ссылка называется пунктом меню. Посетитель использует меню для перехода к интересующим его разделам сайта. Навигационную панель, включающую ссылки на основные разделы сайта (и, возможно, на подразделы текущего раздела), очень желательно иметь на каждой странице.
Наиболее распространены два варианта размещения навигационной панели: вертикально в левой колонке или в строчку в верхнем колонтитуле (в "шапке") страницы. Нередко можно встретить и комбинацию этих способов, когда для организации навигационной панели используется и левая колонка, и верхняя строка. При этом в верхнюю строку, как правило, помещаются ссылки на самые важные, на взгляд разработчика, разделы. Такое меню обычно называют главным меню сайта.
Часто главное меню - это простой список ссылок, с изменяющимися при наведении на них курсора кнопками. Но иногда при наведении курсора на пункт главного меню появляется выпадающее меню со ссылками на страницы "второго уровня". Пункты навигационного меню, как главного, так и расположенного в левой колонке, должны быть максимально короткими, как правило - однословными. Число пунктов, их название и порядок в главном меню не должны меняться при листании страниц. Обязательно должен повторяться пункт, указывающий на текущую страницу, но желательно, чтобы на текущей странице он не был ссылкой. Это облегчает пользователю ориентацию на сайте, поскольку пользователь видит однотипное меню на всех страницах и одновременно понимает, где он в данный момент находится.
Дополнительное меню сайта - как правило, имеет иерархическую структуру и бывает 3-х видов:
1) Выпадающее меню - раскрывается (выпадает) при наведении на пункт меню
2) Раскрывающееся меню - имеет раскрывающуюся структуру по клику на кнопку меню
3) Раскрытое меню - статическое меню, часто имеет древовидную структуру
Если страница достаточно объемная и для ее просмотра потребуется прокрутка, главное меню желательно повторять на конце страницы. Дополнительно в конце страницы может располагаться навигационная ссылка вверх на начало страницы.
Место страницы в иерархии документов
Довольно удобно для посетителя сайта, особенно для попавшего на ваш сайт впервые и сразу на какую-то из внутренних страниц (обычное дело, когда пользователь попал к вам из поисковой системы), если для каждой страницы будет показано ее место в структуре сайта. Это можно реализовать строчкой в верхней части страницы примерно такого вида:
Главная -> раздел -> подраздел -> название текущей страницы
Такие ссылки почему-то называют "хлебными крошками". При этом все вышележащие страницы (главная, раздел, подраздел) оформляются как ссылки. Особенно полезна такая подсказка в случае, если ваш сайт имеет более трех уровней вложенности.
Последовательная навигация
Если вы публикуете, разбивая на страницы, какой-то большой материал, например, целую книгу, то очень удобны для посетителя будут ссылки в нижней части страницы примерно такого вида:
предыдущая страница * оглавление * следующая страница
при этом, естественно, оглавление должно включать ссылки на все HTML-страницы, на которые у вас разбита эта книга.
Т.о. проектирование навигации является одним из важнейших моментов при разработке сайта, отвечающего требованиям юзабилити. Если навигация сайта не логична как по структуре, так и по оформлению, то основным способом ориентации на сайте будет «метод тыка», который совершенной неуместен в такой динамичной среде как Интернет. При этом будет нарушаться основное условие работы с сайтом – оперативное получение информации при минимуме затрат времени и ресурсов.
Формы на HTML странице
Форма - это средство, позволяющее организовать в домашней странице диалог с ее пользователем.
Разработчик домашней страницы создает анкету с помощью специальных элементов:
- кнопки,- списки,- текстовые строки,- текстовые поля.
При этом разработчик указывает свою программу обработки результатов анкеты.
При чтении домашней страницы пользователь заполняет анкету, и, нажав на кнопку "submit" данной анкеты, отправляет ее содержимое программе обработки.
Форма начинается командой <FORM> и заканчивается командой </FORM>.
Данная команда имеет 2 основных параметра: ACTION и METHOD.
Параметр ACTION является обязательным. Он указывает адрес обработчика формы (например, адрес программы обработки или почтовый адрес или просто адрес URL для перехода).
Параметр METHOD не является обязательным. Он принимает одно из двух значений: GET или POST, связанных с методом протокола передачи информации из анкеты.
По умолчанию, METHOD= GET.
Пример команды FORM: <FORM ACTION=" https://www.geocities.com/SiliconValley/99999 " METHOD= POST >
Для задания управляющей кнопки запуска передачи данных надо записать следующую команду:
<INPUT TYPE= submit NAME=" botton1VALUE=" Произвольный текст "> где: INPUT - команда создания управляющего элемента. TYPE - параметр, определяющий управляющий элемент. submit - значение этого параметра (в данном случае: управляющая кнопка). NAME - параметр, задающий имя переменной. botton1 - имя переменной. VALUE - параметр, задающий текст, отображаемый на управляющем элементе. Произвольный текст - значение текста на управляющем элементе
Значением параметра ACTION может быть просто адрес для перехода.
<FORM ACTION=" web2e.html"> <INPUT TYPE=SUBMIT VALUE=" Вернуться к началу раздела "></FORM>
Основные типы управляющих злементов INPUT:
1) Текстовая строка: TYPE=text
Определяет окно для ввода одной строки текста. Пример: <INPUT TYPE=text NAME=" text1 " SIZE= 30 VALUE=" Введите текст ">
2) Окно для ввода пароля: TYPE=password
Аналогичен типу text, но при вводе каждый символ заменяется символом *. Пример. Надо ввести пароль длиной не более 5 символов. <INPUT TYPE=password NAME= pass size= 10 maxlength= 5 >
3) Текстовое окно: TEXTAREA
<TEXTAREA NAME= text3 COLS= 30 ROWS= 5 WRAP=VIRTUAL>
.....
Первоначально заданный текст
.....
</TEXTAREA>
Параметр COLS задает количество символов в строке, параметр ROWS задает количество строк в окне, необязательный параметр WRAP=VIRTUAL задает линейку прокрутки.
4) Радиокнопка: TYPE=radio
Может быть задано несколько радиокнопок с одинаковым именем (т.е. значением параметра NAME), но они будут взаимоисключающими: может быть нажата (CHECKED) только одна из них.
<INPUT TYPE=radio NAME= color VALUE=" Красная" checked> Красная
<INPUT TYPE=radio NAME= color VALUE=" Синяя"> Синяя
<INPUT TYPE=radio NAME= color VALUE=" Зеленая"> Зеленая
5) Помеченный квадрат: TYPE=checkbox
В отличие от радиокнопок, может быть несколько квадратов с одинаковыми именами. Например, в следующем примере первоначально задана кнопка " Водка":
<INPUT TYPE=checkbox NAME= box VALUE=" Водка" checked> Водка
<INPUT TYPE=checkbox NAME= box VALUE=" Коньяк"> Коньяк
<INPUT TYPE=checkbox NAME= box VALUE=" Ликер"> Ликер
6) Скрытый текст: TYPE=hidden
При отображении не виден пользователю. Служит для прямой передачи служебной информации от домашней страницы обработчику формы, прозрачно для пользователя. <INPUT TYPE=hidden NAME= Version VALUE=" 2.3 ">
Здесь приведен пример передачи информации о версии программы. При нажатии на кнопку submit в программу обработки будет введено: Version=2.3
7) Меню: SELECT
Пусть Вам предоставилась возможность выбрать одну из путевок в соответствии со следующим списком:
<SELECT NAME=" script ">
<OPTION VALUE=" tour1 "> Путевка в Сочи
<OPTION VALUE=" tour2 "> Путевка в Париж
<OPTION VALUE=" tour3 "> Путевка на Колыму
8) Кнопка ввода: TYPE=submit <INPUT TYPE=submit VALUE=" Ввод данных ">
9) Кнопка отмены: TYPE=reset
Кнопка выполняет инициализацию начальными значениями всех полей. <INPUT TYPE=reset VALUE=" Очистить поля ">
16. Фреймы(кадры) на HTML странице. Дескриптор <iframe>
Frame - рамка, кадр. Фреймы делят пространство окна браузера на независимые разделы, в которых отображается различная информация.Очень удобно использовать фреймы когда необходимо отображать на экране данные из разных источников. Чтобы сделать фрейм, надо создать новую Вэб-страницу, с тэгами <FRAMESET> <FRAME>.
Дескриптор <FRAMESET> формирует набор фреймов, которые делят пространство окна на строки и столбцы. Далее необходимо задать значения высоты/ширины всех строк/столбцов, выраженные в процентах относительно текущих габаритов окна браузера, пикселях или в виде символа звездочки. Символ звездочки говорит о том, что размеры фреймов зависят от габаритов остальных фреймов страницы.
Дескриптор <FRAME> служит для определения структуры и содержимого конкретного фрейма.
<html>
<head>
<title>Пример работы с фреймами</title>
</head>
<frameset rows="200,*">
<frame name="frame1" src="lsn017.html">
<frame name="frame2" src="lsn016.html">
</frameset>
</html>
Достоинства и недостатки фреймов
Достоинства:
- фреймы одновременно отображают различную информацию в пределах одного окна;
- используя фреймы, можно постоянно отображать какую-нибудь информацию (например логотип), не включая ее в каждую страницу сайта;
- можно гибко построить навигацию по сайту.
Недостатки:
- главное достоинство фреймов (отображение различной информации в пределах одного окна) является их же и недостатком, т.к. доступная область Вэб-страницы существенно сужается;
- при создании фрейма правильно выбрать его размер часто бывает затруднительно. Таким образом, пользователь должен постоянно пролистывать фрейм при помощи полос прокрутки, что может очень быстро надоесть;
- при низком разрешении экрана монитора объем видимой информации значительно уменьшается;
- ну и самый неприятный недостаток - многие поисковые системы и каталоги отказываются регистрировать страницы, использующие фреймы.
Еще одним из недостатков фреймов является тот факт, что некоторые браузеры не умеют обрабатывать фреймы. При этом пользователь видит перед собой пустой экран. Для того, чтобы не вводить пользователя в заблуждение служит тэг <NOFRAMES>. Текст, помещенный между открывающим и закрывающим тэгом, отображается в случае невозможности отображения фрейма.
Плавающие фреймы
Для создания плавающих фреймов служит тэг <IFRAME>. Плавающим называется фрейм, представляющий собой часть вэб-страницы и не требующий построения отдельной страницы с описанием фреймов. Атрибут NAME служит для задания имени плавающего фрейма, которое может затем быть использовано в определении гиперссылки с целью открытия в этом фрейме соответствующей страницы.
Атрибутами WIDTH HEIGHT можно задавать размеры плавающего фрейма, т.к. пользователь самостоятельно изменить их не может.
Плавающие фреймы в данное время поддерживаются только Microsoft IE.
<html>
<head>
<title>Пример работы с фреймами</title>
</head>
<body>
<iframe src="lsn017.html" name="frame1"
width="350" height="300" align="left"></iframe>
<h1>Пример работы с фреймами</h1>
..
<h1>Пример работы с фреймами</h1>
</body>
</frameset>
</html>