Эффективность веб-проекта, возможность получения дохода или прибыли от сайта, прямо пропорционально зависит от системы навигации на нем. Навигация сайта входит в основу восприятия целостного веб-дизайна наряду с компоновкой сайта и его структурой. Какую бы навигацию для проекта вы не выбрали, немного любви и творчества не навредит, а скорее оставит только приятные эмоции от путешествия по сайту. Сегодня мы рассмотрим различные примеры навигации.
Наиболее популярными и все еще актуальными «путеводителями» по сайтам являются ролловеры (от англ. rollover). Они могут быть обыграны графикой, либо просто представлять собой текстовую гиперссылку. Ролловеры, как правило, помогают ответить пользователю на вопрос «Где я уже был?».
Навигация на сайте может быть вертикальная, горизонтальная и комбинированная. Вне зависимости от выбора типа навигации, если в ней присутствует основное - логика, можно побудить посетителей просматривать те страницы сайта, которые сам владелец считает приоритетными. Грамотно составленная система навигации позволяет пользователю перемещаться по сайту не задумываясь о своих действиях.
Удобная навигация это:
- возможность попасть на наиболее важные страницы сайта всего за один клик;
- максимум три клика, чтобы перейти от исходной до нужной страницы на сайте;
- использование стандартных и общепринятых элементов навигации;
- визуальное выделение и эффектность элементов навигации;
- возможность пользователю попасть на нужную ему страницу несколькими способами (дублирование элементов навигации).
Какую бы навигацию для проекта вы не выбрали, немного любви и творчества не навредит, а скорее оставит только приятные эмоции от путешествия по сайту. Онлайн-портфолио фотографа в виде книги. Разноцветные квадратные кнопки служат переходом к страницам сайта, а листает странички вентилятор. Это один из немногих случаев, когда ждать загрузку страниц совсем не скучно.
Веб-дизайн из Украины. Наслаждаться рабочим столом с элементами навигации можно бесконечно долго.
Сайт актрисы Сары Хайленд (Sarah Hyland) является истинным отражением ее личности. Эскизы, использованные в качестве меню, подходят для этой странички идеально!
Необязательно понимать испанский язык, чтобы оценить эстетическую сторону рисованного меню этого сайта. Симпатичная «небрежность» придает проекту экстравагантности.
Креативное агентство оригинально во всем. Навигационное меню в виде шкалы измерений.
Яркий сайт бюро путешествий с не менее красочным и запоминающимся меню.
Необычный сайт человека с необычным увлечением. Веб-проект картографа-любителя.
Пункты меню вроде как нарисованы от руки, правда?
Недаром пункты меню обозначены пиктограммами, ведь этот проект как раз и посвящен иконкам для сайтов.
Интернет-проект для размещения портфолио. При клике на любой из пунктов меню картинка «утапливается».
Еще одно оригинальное представление меню.
Все гениальное - просто.
Не меню, а сплошная мозаика. Необычно и практично.
Каждая фигурка на странице что-то , да таит в себе.
Сайт готовых проектов домов и коттеджей с наглядными материалами, доступ к которым осуществляется в один клик.
Самое оригинальное hand-made ателье.
WWW (World Wide Web ) - это только часть услуг, которыми располагает Интернет. Помимо WWW, с помощью Интернета можно воспользоваться электронной почтой, FTP-сервисом, телеконференциями и другими услугами. На русский язык WWW переводят по-разному, от «всемирная паутина» до «ППП - Повсеместно Протянутая Паутина».
WWW - самый популярный сервис на базе Интернета, и в то же время самый молодой. Популярность WWW зарабатывает в основном на удобстве представления информации, не сравнимой с другими сервисами.
WWW построена на технологии, в основу которой положен гипертекст, т.е. текст со ссылками. Разработка этой технологии в основном проводилась в Европейской лаборатории физики элементарных частиц (CERN) в Женеве. Сейчас можно говорить не о гипертекстовой, а о гипермедийной среде, т.е. сеть перестала быть текстовой, в ней появилось огромное количество графики, музыки и т.д. Сайты строятся по новым технологиям, напримерFlash, т.е.не содержат текста как такового.
Перемещение от сайта к сайту или от страницы к страницы осуществляется с помощью гиперссылок.
Для адресации в WWW используется URL. В общем виде URL записывается как
протокол://адрес сервера (host domain ):[порт]/путь/имя_файла
Рассмотрим, например, адрес: http :// www . rea . ru / new / index . htm . Здесь:
http - определяет протокол, т.е. способ передачи документа. HTTP - это протокол, который служит для работы с гипертекстовыми документами;
www . rea . ru - адрес сервера, где www - узел, на котором размещен сайт, геа и ru - имена доменов второго и третьего уровня;
new - каталог (путь) к искомому файлу;
index . htm - имя файла, гдеhtm - его тип.
Номер порта в данном случае не используется, и считается, что данные расположены на стандартном порту для данного протокола.
Часто в поле ввода адреса браузера будет достаточно ввести только адрес сервера (www . rea . ru ). Протокол HTTP будет дописан по умолчанию. Также по умолчанию будет открыт файл index из корневого каталога.
Браузеры
Браузеры (browser) - это программы-обозреватели, с помощью которых можно просматривать ресурсы WWW. Также с помощью браузеров можно просматривать HTML-файлы и некоторые другие типы файлов, не будучи подключенным к сети.
Браузеры могут интерпретировать адреса (URL), маркеры языка HTML , а также понимать несколько Интернет - протоколов, таких, как HTTP, FTP.
К наиболее популярным браузерам относятся Microsoft Internet Explorer, Netscape Navigator, Opera.
2.6. Семейство программ корпорации Microsoft для работы в Интернете
Семейство программ корпорации Microsoftдля работы в Интернете было создано за достаточно короткий срок - с 1995 по 1997 г. и первоначально уступало по популярности программам фирмы Netscape Communications. Однако после выпуска серии программ Internet Explorer , а затем и интеграции их в операционную систему Windows 98, положение резко изменилось. Особенно это относится к русскоязычной части Интернета. Считается, что более 70% пользователей в настоящее время работают с программами Internet Explorer. Каждая программа семейства предназначена для решения конкретной задачи, но их пользовательский интерфейс весьма похож, что облегчает процесс изучения. В семейство программ для работы с Интернетом входят:
обозреватель Internet Explorer - программа просмотра документов WWW, локальной сети или интрасети;
программа для обмена сообщениями и работы с группами новостей OutLook Express ;
программа NetMeeting - средство проведения конференций через Интернет или в"локальной сети с возможностями вызова, передачей голоса и видеоизображения;
программа NetShow , позволяющая воспроизвести в Интернете мультимедийные документы;
программа FontPage Express - редактор документов на языкеHTML.
Навигация - это то, что помогает пользователю путешествовать по сайту. Это структура каталога в интернет-магазине, помогающая отыскать нужную вещь, меню информационного сайта с подразделами для разных групп контента, список тем на новостном портале и так далее.
Навигация всегда используется посетителями вне зависимости от их знаний относительно терминологии. И чем она проще, тем быстрее пользователь находит нужную ему информацию и тем лучшее впечатление остается от вашего ресурса. Запутанные пути, даже если и приводят к нужному результату, все же могут обеспечивать его постоянно. Но зачастую пользователи просто уходят с сайта в недоумении, так и не поняв, как пользоваться всем этим «богатством».
Какой должна быть навигация
Вот 8 критериев, по котором нужно оценить существующую навигацию. Если на вашем сайте все не так - изменяйте. Если же вы только создаете ресурс, ориентируйтесь на наши советы сразу, чтобы потом не пришлось переделывать. Итак, навигация на сайте должна соответствовать таким критериям:
Не забывайте, что всем этим правилам должна соответствовать не только первичная, но и вторичная навигация.
За последний год мы увидели много новых тенденций в мире веб-дизайна. В этой статье я сосредоточусь на навигации по сайту, которую внедряют современные веб-дизайнеры, чтобы сделать сайт не только симпатичным, но и понятным для посетителей. Эти тенденции в области навигации хорошо работают для различных типов сайтов. А еще эти виды меню хорошо отражаются на разных формах и размерах экрана.
Посмотрите на это разнообразие, и найдите интересные идеи для своих следующих проектов!
«Липкая» навигация
Навигация предназначена для того, чтобы помочь пользователям перейти от точки A ко всем остальным точкам сайта. И сохранение навигационного меню в фиксированном месте позволяет пользователям перемещаться по сайту из любой точки страницы. Многие веб-сайты «прикрепляют» свою основную навигацию к верхней части экрана. Когда пользователь прокручивает вниз, чтобы исследовать контент, меню всегда перед глазами.
Это стало просто реализовать благодаря плагинам CSS и jQuery, и многие темы веб-сайтов теперь выпускаются с «липкой» навигационной панелью по умолчанию. Фиксированная навигация также удобна для мобильных пользователей, где сайт длиннее и тоньше.
Как ее использовать?
Если у вас есть сайт с большим количеством навигационных элементов – тогда этот вариант вам подойдет. Это верный способ держать посетителей на сайте дольше и увеличивать общее количество просмотров страниц.
Однако убедитесь, что навигационная панель не занимает слишком много места. Она не должна быть настолько большой, чтобы блокировать основные части содержимого страницы. Сайт US Magazine обошел эту проблему, уменьшив размер своей панели навигации – это сделало ее менее навязчивой.
Мега-меню
Мега-меню стали популярны с увеличением числа сайтов в стиле журнала. Мега-меню отличаются от обычных выпадающих списков, и обычно содержат несколько столбцов контента. Этот метод работает хорошо, если использовать его разумно, но он не подходит для каждого сайта.
Зачем ими пользоваться?
Посетители могут получить представление о вашем блоге или веб-сайте, просмотрев связанный контент. Если вы можете предоставить больше контента в мега-меню, то почему бы и нет?
Эта тенденция не работает на мобильных устройствах, поскольку на экране нет достаточно места. Но многие люди по-прежнему просматривают Интернет на настольных компьютерах и ноутбуках, поэтому и для мега-меню найдется широкая аудитория.
Универсальная навигация
Некоторые компании работают или владеют несколькими брендами и включают универсальную навигацию по всему веб-сайту. Disney, например, владеет тематическими парками, создает игры и производит фильмы вместе с телешоу. Имеет смысл хранить эту универсальную навигацию на каждой странице, независимо от бренда, для привлечения внимания к другим продуктам Disney.
И эта тенденция не ограничивается конгломератами или холдинговыми компаниями. Она иногда используется в сетях веб-сайтов, таких как принадлежащие New York Media. Еще один хороший пример - в заголовке Mashable, который ссылается на все международные сайты бренда.
Зачем это использовать?
Если вы работаете с крупной сетью продуктов или брендов, то может быть полезно связать их все вместе, чтобы создать единую идентификацию бренда. Универсальная навигация может побуждать посетителей посмотреть другие продукты.
Вертикальная раздвижная навигация
Растет количество веб-сайтов, которые используют вертикальную навигацию, и в некоторых случаях она действительно работает хорошо. Это особенно популярно в сайтах-портфолио или креативных агентствах, которые выходят за границы традиционного веб-дизайна.
Приведенный выше пример AWARD - это фантастический случай использования вертикальной навигации. При этом сохраняется ее видимость в любое время. Здесь нет надоевшего гамбургера – сбоку видны понятные значки. Это экспериментальный подход к дизайну навигации, но он может работать на веб-сайтах с творческой целевой аудиторией.
Зачем это использовать?
Попробуйте эту технику, только если вы собираетесь использовать полноэкранный макет, который отходит от традиционного дизайна.
Рабочую вертикальную навигацию нелегко создать с нуля, и сложно сделать ее работающей в адаптивных проектах. Однако, если вам интересно экспериментировать, и желание попробовать новые идеи очень сильно, тогда вертикальные меню могут быть неплохим выходом.
Скрытое меню
Каждый веб-дизайнер должен знать о значках-гамбургерах и особенностях их использовании в отзывчивом дизайне. Но по мере того, как люди знакомятся с иконкой гамбургера все ближе, все больше и больше сайтов постоянно скрывают навигацию от просмотра.
Немного странно: гамбургер совсем не облегчает жизнь пользователю, не дает ему сразу открыть ссылки на другие страницы сайта. Однако он очищает пространство на экране, удаляя навигацию из поля зрения. Были различные исследования, которые указывают на то, что большинство пользователей не приветствуют скрытые меню. Но эта тенденция может меняться с большим количеством людей, использующих смартфоны, и знающих значение этого значка.
Зачем это использовать?
Лучший сценарий для скрытого меню - это высокотехнологичная аудитория. Эти посетители узнают значок гамбургера, и они знают, что это означает «нажмите здесь для открытия меню». Поэтому, если вы разрабатываете технический блог или создаете B2B интернет-агентство, это может сработать. Но если нет, хорошо подумайте, прежде чем применять этот подход, и убедитесь, что вы не жертвуете удобством в пользу стиля.
Отзывчивые меню
При разработке веб-сайта нет возможности избежать использования мобильной навигации – потому что ваш сайт со 100% вероятностью будут просматривать с мобильного. Дизайнеры часто скрывают некоторые навигационные ссылки на мобильном телефоне, чтобы помочь меню лучше работать на маленьких экранах.
Но многие сайты следуют новой тенденции сохранения всех элементов навигации с помощью раскрывающихся меню. Для этого обычно требуется значок гамбургера с иконками переключения для выпадающих ссылок.
Вы увидите эту технику только на мобильных экранах или в маленьких окнах браузера. Например, мобильный сайт Politico использует знаки плюса (+) для указания подменю рядом с каждой ссылкой.
Зачем это использовать?
Посетители должны иметь доступ к просмотру всего веб-сайта, независимо от того, какое устройство они используют. Сохраняя подменю, вы можете предложить более широкие возможности для просмотра.
Просто убедитесь, что каждое подменю четко обозначено значком, изменением цвета или чем-то визуальным. Посетители должны знать, открывается ли меню нажатием на ссылку, или их отправит на новую страницу.
Карусели статей
Эта тенденция становится все более популярной в блогах и на крупных новостных сайтах. Многие из этих сайтов могут публиковать десятки, если не сотни, новых статей каждый день.
Добавление простой карусели в начало страницы дает посетителям возможность ознакомиться с последними статьями. Эти истории можно обновлять динамически. Их можно создать в виде миниатюр или любого другого варианта, что вам нравится. Вы можете увидеть примеры в любой статье Vogue.
Зачем это использовать?
Если вы разрабатываете блог с большим объемом контента, эта тенденция поможет создать для пользователя настоящие чудеса. Посетители могут узнать о последних статьях, и такое меню поощряет посетителей исследовать более чем одну историю за посещение. В результате это увеличит среднее общее время на сайте. Большинство блогов, которые публикуют много контента, хотят увеличить посещаемость, а карусели - отличный способ сделать это.
Google любит лонгриды, и он заставляет авторов публиковать более подробные руководства практически по всем вопросам. Это отлично работает для веб-контента, но это может испортить впечатление от чтения. Чтобы упростить ситуацию, используйте оглавление – ссылки на разделы статьи в самом начале. Наиболее ярким примером является Википедия, которая с самого начала использует ToC.
Зачем это использовать?
Основная причина использования оглавления - улучшить юзабилити. Более длинные статьи становятся нормой, но пользователю может быть не нужно читать все 5000 слов. Они также полезны в рейтингах SERP, поскольку Google может предлагать ссылки перехода на основе оглавления. Это беспроигрышный подход.
Угловые ссылки
Это интересная навигационная тенденция, и она быстро распространяется. Кажется, что каждый стартап и профессиональный бизнес используют этот стиль для создания навигации, которая оказывается интуитивно понятной и симметричной.
Обычно применяются стили:
- Малые буквы
- Sans-serif шрифты
- Дополнительный горизонтальный интервал
- Белый или очень легкий оттенок
Эта тенденция дизайна стала фирменным стилем для чистой, четкой и профессионально выглядящей навигации.
Зачем это использовать?
Такое меню просто выглядит профессионально; оно заметно и ненавязчиво, и вызывает чувство доверия. Если вы разрабатываете стартап или корпоративный сайт, эта тенденция, вероятно, является лучшим стилем дизайна для вашей навигации. Но будьте осторожны: сайт не должен выглядеть бездушно, или как копия других проектов.
Одностраничная точечная навигация
Рост популярности одностраничных веб-сайтов вызвал появление множество новых тенденций. Одна из них - точечная навигация: серия круговых значков, расположенных в левой или правой части экрана. Каждая из этих точек представляет собой другой раздел сайта. А так как макет - одна длинная страница, эти ссылки подсвечиваются, чтобы указать текущую позицию пользователя. Мне очень нравится эта идея, но есть вопрос, понимают ли люди, что означают эти точки, и как их использовать.
Зачем это использовать?
Если вы разрабатываете макет одностраничника, мы бы рекомендовали использовать липкую навигацию. Это облегчает просмотр того, что представляет собой каждый слайд, и какая информация находится на странице.
Но если вы не можете (или не хотите) использовать верхнюю навигацию, то эти точки - это тоже хорошая вещь. Или еще лучше: объедините оба варианта! Или даже включите текст рядом с точками. Есть много вариантов, и они могут хорошо работать.
А какая навигация нравится вам?
ЛЕКЦИЯ 1.
ОСНОВЫ WEB: САЙТЫ, НАВИГАТОРЫ И НАВИГАЦИЯ
Этот курс для тех, кто настроен освоить HTML (язык конструирования сайтов), а главное, принять на вооружение те правила дизайна, которые не просто увеличивают число посетителей гипертекстовых страничек, но и улучшают “экологию” глобальной информационной сети . В современном мире разразился настоящий бум сайтостроения. Свои странички в Интернете имеют все: государственные учреждения, большие компании, мелкие предприниматели, магазины, библиотеки, школы, сады, ясли, Президент России и Петр Мячиков. Вероятно, и вы подумываете об этом!
В самом деле, почему нет? В Интернет принимают всех! Вы тоже можете построить свой собственный виртуальный дом. Или вместе с друзьями свить уютное гнездышко для своей школы, а потом ходить друг к другу в гости.
Какими знаниями и умениями нужно обладать, чтобы успешно освоить предлагаемый курс?
Предполагается, что начинающий конструктор умеет:
Ø запускать компьютерное приложение и завершать его работу;
Ø переключаться между экранными окнами приложений и переносить информацию через буфер обмена из одного окна в другое;
Ø писать и редактировать тексты на компьютере;
Ø редактировать графическую информацию;
Ø ну, и кое-что еще из обычного багажа пользователя домашнего компьютера.
Никаких предварительных знаний по HTML, проектированию сайтов, дизайну, а также программированию не предполагается.
Первая лекция содержит вводный материал. Она описывает web-пространство для начинающего пользователя - человека, который, не отставая от технического прогресса, намерен использовать Интернет в своей повседневной деятельности.
Понятие web-пространства
Web-пространство - это мировая совокупность сайтов. Сайт расположен на сервере, серверы соединены между собой при помощи каналов связи.
Понятие сайта
Сайт - это совокупность гипертекстовых страниц (чаще имеющая древовидную структуру) для представления предприятия, фирмы (корпоративные сайты), для представления школ (школьные сайты), частных
лиц (личные сайты). Сайт может осуществлять коммерцию (интернет-магазины), поставлять информационные услуги (сайты для поиска информации,
библиотеки, справочные системы, списки рассылки, обучение). В современном мире сайт становится визитной карточкой , как организации, так и частного лица.
Гипертекстовые страницы, которые составляют сайт, записываются на специальном языке HTML (Hyper Text Markup Language - “эйч-ти-эм-эл”, или “аш-тэ-эм-эль”, используется английская или латинская транскрипция). Этот язык не является, строго говоря, языком программирования, хотя он и интерпретируется браузером. Средства HTML служат для указаний браузеру, в каком виде выводить на экран текст и графику, а также позволяют записывать на страницах гиперссылки.
HTML-разметка (в отличие, например, от Word-разметки) довольно терпима к различным платформам, операционным системам и мощностям компьютера. Это позволяет использовать ее как основу для построения сайтов в Интернете, где разнообразие платформ, ОС и компьютеров очень велико.
Сайты смотрят при помощи браузера - специальной компьютерной программы.
Гиперссылка - это чувствительная область на экране. При щелчке мыши по такой области происходит гипертекстовый переход - браузер загружает другую страницу (она может быть расположена на каком угодно сервере мировой сети).
Чувствительной областью может быть фрагмент текста (обычно он выделяется, синим цветом и подчеркиванием), картинка или фрагмент картинки. Попадание курсора мыши в область действия гиперссылки легко увидеть - он меняет свою форму на указующий перст.
Просмотр сайта
Для просмотра страниц сайта используется специальная программа просмотра - браузер (browser). Браузер интерпретирует указания, записанные разработчиками в обычном текстовом файле (стандартные расширения htm и html), и отображает документ на экране.
Разнообразие браузеров Современные гипертекстовые документы все больше снабжаются средствами мультимедиа: графикой высокого разрешения, звуком, видео, различными спецэффектами, интерактивностью (диалог с пользователем).
Соответственно, разработчики браузеров добавляют в свои продукты средства поддержки этих новых гипертекстовых технологий.
Однако существуют браузеры, которые вообще не поддерживают графики, например, текстовый браузер Lynx. Голосовой браузер pwWebSpeek предназначен для слепых людей. Такие люди не видят картинку, но получают о ней представление, услышав ее описание. Существуют браузеры, использующие тактильный ввод-вывод по азбуке Брайля. Некоторые пользователи работают с Web по телефону. Так, например, устроена система Web-on-Call Voice Browser.
В последнее время становится модным иметь в автомобиле бортовой компьютер с интернет-связью. Так как глаза пользователя заняты дорогой, к браузеру подключают речевой синтезатор.
Из большого числа существующих браузеров наиболее популярным является Microsoft Internet Explorer (около 90% пользователей). Его сверхпопулярность в основном объясняется тем, что этот браузер входит в состав операционной системы Windows и поэтому не требует дополнительных средств и усилий по установке на компьютере.
Управление браузером Microsoft Internet Explorer (версия 6.0)
При запуске браузера открывается окно (рис. 1), которое содержит:
Ø заголовок окна;
Ø главное меню;
Ø панель инструментов;
Ø панель адреса;
Ø рабочую область окна (в ней отображается web-страница);
Ø строку состояния.
Рис. 1. Окно браузера
Ввод адреса
Адрес документа (гипертекстовой страницы) в сети - URL (Uniform Resource Location, универсальный указатель ресурсов) - записывается в адресной строке браузера. Для ввода адреса нужно щелкнуть по адресной строке и набрать в ней URL документа с клавиатуры, например, http://www. *****
Чтение страницы
Загруженная страница (документ) может содержать информацию, представленную в виде текста вместе с картинками (реже звук и видео). После активизации гиперссылки в документе происходит загрузка другого документа, который может находиться на этом же или другом сервере сети. Так как Интернет работает медленно, загрузка страницы может продолжаться от нескольких секунд до нескольких минут (зависит от размера страницы, скорости канала связи и устойчивости работы сети на момент просмотра).
Текстовые ссылки в документе обычно имеют одновременно два выделения: синий цвет и подчеркивание. В момент активизации ссылки цвет ее меняется на красный. Ссылка сообщает о том, что она начинает работать. Если переход по ссылке уже выполнялся, ее цвет становится более приглушенным (пурпурным).
Использование разных цветов для отображения гиперссылки позволяет лучше ориентироваться при просмотре сайтов. Например, в документе может быть несколько разных ссылок на одну и ту же страницу. Просмотр документа по любой ссылке “окрасит” все ссылки на него в пурпурный цвет, что является подсказкой пользователю об уже посещенных местах сайта.
В современном дизайне сайтов часто используют и другой прием оформления гиперссылок: чувствительный текст выделяется цветом, а подчеркивание появляется только в момент зависания над ссылкой курсора.
Не надо забывать, что ссылкой может быть и картинка (например, выполненная в виде кнопки). Однозначным указанием на то, что область на странице является ссылкой, является преобразование курсора в указующий перст в момент зависания над чувствительной областью.
Главное меню браузера
Файл
Основные операции меню Файл (рис.2):
Ø запись на диск текущей страницы;
Ø печать текущей страницы.
Рис. 2. Меню Файл
Правка
Меню Правка позволяет выполнять операции (рис. 3):
Ø копирование выделенных элементов в буфер обмена Windows;
Ø поиск на текущей странице.
Рис. 3. Меню Правка
Меню Вид позволяет выполнять операции (рис. 4):
Ø управление внешним видом браузера;
Ø выбор кодировки и размера шрифта;
Ø просмотр HTML-кода страницы;
Ø прекращение загрузки страницы;
Рис. 4. Меню Вид
Избранное
Позволяет работать с “закладками” (адреса запомненных пользователем страниц).
Сервис
Меню Сервис позволяет (рис. 5):
Ø настроить браузер;
Ø вызвать дополнительные службы.
Рис. 5. Меню Сервис
Справка
Доступ к справочной информации.
Панель инструментов
Панель инструментов (рис. 6) включает в себя кнопки часто используемых команд (они дублируют позиции главного меню).
Рис. 6. Панель инструментов браузера
Кнопки Назад и Вперед
Браузер сохраняет “путь”, по которому пользователь просматривает страницы. Кнопки Назад и Вперед позволяют перемещаться по этой истории, соответственно, назад и вперед.
Кнопка “Остановить”
Когда документ долго не грузится (неполадки на сервере), пользователь передумал или с первых строк понял, что документ не нужен, можно нажать на
Кнопка “Обновить”
Эта команда иногда помогает при явно затянувшейся загрузке (сбой в сети или на сервере). Однако наиболее часто этой кнопкой пользуются web-разработчики, чтобы увидеть изменения после выполнения редактирования htm-файла.
Кнопка “Домой”
Эта кнопка загружает в браузер “домашнюю” страницу, ту, которую браузер загружает автоматически при старте. “Домашняя” страница задается пользователем в настройках браузера.
Кнопка “Поиск”
Кнопка “Избранное”
Добавить закладку на текущую страницу или загрузить документ по имеющейся закладке.
Кнопка “Печать”
Печать текущей страницы.
Настройка Панели инструментов
Панель настройки можно вызвать через меню Вид/ Панели инструментов/Настройка (или щелчком правой кнопкой по панели инструментов):
Рис. 7. Окно настройки панели инструментов
Панель инструментов (справа) можно сформировать по своему желанию, используя заготовки (слева).
Настройка браузера
Вызов панели настроек выполняется через позицию Сервис/Свойства обозревателя главного меню.
Вкладка “Общие”
Вид вкладки показан на рис. 1.8.
Рис. 8. Вкладка Общие панели настройки браузера
Домашняя страница
Устанавливается вводом (копированием) нужного URL в поле “Адрес”.
Вкладка “Дополнительно”
Раздел “Мультимедиа”
Если вас интересует только текстовая информация страницы, а на графику вы не хотите тратить время и деньги, снимите флажок в строке “Отображать рисунки”.
Рис. 9. Пункт “Отображать рисунки”
Вкладка “Программы”
В поле “Редактор HTML” установите “текстовый редактор “Блокнот”.
Рис. 10. Редактор “Блокнот” для быстрого просмотра кода страницы
Стоимость просмотра сайта
Разные провайдеры по-разному начисляют оплату за работу в сети. Одни берут деньги за килобайты, другие - за время подключения к Интернету. В любом случае килобайтный размер страницы прямо пропорционален числу копеек, необходимых для ее просмотра.
Устройство сайта
Рассмотрим устройство сайта на примере
В окне браузера с загруженным сайтом можно выделить следующие важные элементы (рис. 11):
Ø Заголовок окна. Заголовок окна совпадает с заголовком страницы.
Ø Заголовок сайта. Расположен в самом верху страницы.
Ø Логотип. Обычно расположен в левом верхнем углу страницы. На вторых страницах логотип является ссылкой на Главную (начальную) страницу.
Ø Горизонтальное навигационное меню сайта. Обычно располагается под заголовком сайта.
Ø Вертикальное навигационное меню. Обычно располагается под логотипом.
Рис. 11. Элементы гипертекстового документа
Сайт состоит из страниц
Как и печатное издание, например книга, сайт состоит из страниц. Страницы сайта - это файлы с расширением htm (html). Страницу сайта часто называют документом. Как и книга, сайт имеет одну главную страницу (входная
точка, домашняя страница, начальная страница). Именно эта страница указывается в качестве адреса сайта.
В отличие от обычной книги страницы сайта редко листаются по порядку. Благодаря гипертекстовым переходам пользователь переходит со страницы на страницу по контексту (по смыслу, по необходимости получить только ту информацию, которая относится к интересующей теме).
Задание
Попробуйте в браузере, подключенном к Интернету, перейти на сайт *****
Сайты с иерархической структурой
Иерархия - это зависимость по подчинению. Эта структура чаще других (цепочка, таблица) используется для организации страниц сайта. Обычно сайты имеют специальную страницу с названием “Карта сайта”, где иерархия страниц показана в виде системы вложенных списков. Вложенность отражает иерархическую схему сайта, а списочные записи являются гиперссылками на соответствующие страницы.
Пользователь видит полное логическое строение сайта и имеет возможность одним щелчком попасть на любую страницу (рис. 12).
Рис. 12. Карта сайта
Системы навигации по сайту
Перемещение по сайту (навигация) должно быть организовано понятно и удобно для пользователя. При этом приемы навигации на правильных сайтах едины для всех его страниц. Исключение составляет случай, когда сайт имеет самостоятельные подсайты - на них может быть использована собственная навигационная схема.
Удобная навигация
Навигация является удобной, если на любой странице сайта можно легко ответить на три вопроса.
Ø Где я? Пользователь однозначно понимает, где внутри сайта он находится.
Ø Куда я могу пойти? С каждой страницы есть возможность попасть на любую другую, минуя Главную.
Ø Где меню? Пользователю не приходится прокручивать страницу для доступа к навигационным элементам.
Перечисленные ниже книги будут очень полезны для работы на курсах:
1. . Web-конструирование. HTML, БХВ-Петербург,2003.
2. Дмитрий Кирсанов. Веб-дизайн. СПб.: Символ, 1999.
