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

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

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

Схема навигации по сайту

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

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

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

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

Панели ссылок

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

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

Макетирование веб страницы

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

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

Браузеры

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

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

Ограничения, связанные с аппаратными средствами

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

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

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

Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.

Основные термины HTML

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

Элементы

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

до

) и абзацев (определены как
); в список можно включить элементы ,
, , и и многие другие.
Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:
Теги
Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.
Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например,
.
Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например,
.
Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег и закрывающий тег . Что находится между этими двумя тегами будет содержимым ссылки.
Так, теги ссылок будут выглядеть примерно так:
...
Атрибуты
Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.
Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом href будет выглядеть следующим образом:
Shay Howe
Демонстрация основных терминов HTML
Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.
Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег
Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу.
Настройка структуры документа HTML
HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.
Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: , , и .
Объявление типа документа или находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто . После этого идёт элемент означающий начало документа.
Внутри элемент определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.
Всё видимое содержимое веб-страницы будет находиться в элементе . Структура типичного HTML-документа выглядит следующим образом:
Привет, мир!
Привет, мир!

Это веб-страница.

Демонстрация структуры HTML-документа
Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент . Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р> . Поскольку и заголовок и абзац вложены в элемент <body> , они видны на веб-странице.</p><p>Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html> . Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body> .</p><h3>Самозакрывающиеся элементы</h3><p>В предыдущем примере элемент <meta> был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. <meta> является одним из таких элементов. Содержимое элемента <meta> в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html> и элементов <html> , <head> и <body> , является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.</p><h3>Валидация кода</h3><p>Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.</p><h2>На практике</h2><p>В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy><p>Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.</p><h2>Основные термины CSS</h2><p>В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.</p><h3>Селекторы</h3><p>При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.</p><p>Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р> .</p><p>В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <span><p>P { ... } </p><h3>Свойства</h3><p>Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background , color , font-size , height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size , применяемые ко всем элементам <span><p>P { color: ...; font-size: ...; } </p><h3>Значения</h3><p>Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p >И устанавливаем значение свойства color как orange , а значение свойства font-size как 16 пикселей.</p><p>P { color: orange; font-size: 16px; } </p><p>Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.</p><p>Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.</p><p><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy></p><p>Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения</p><p>Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.</p><h2>Работа с селекторами</h2><p>Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.</p><h3>Селекторы типа</h3><p>Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div . Следующий код показывает селектор типа для элементов <div> , а также соответствующий HTML.</p><p>Div { ... } </p><p> <div>...</div> <div>...</div> </p><h3>Классы</h3><p>Классы позволяют выбрать элемент на основе значения атрибута class . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.</p><p>Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class для нескольких элементов.</p><p>В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class , включая элементы <div> и <span><p>Awesome { ... } </p><p> <div class="awesome">...</div> </p><h3>Идентификаторы</h3><p>Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class , идентификаторы используют значение атрибута id в качестве селектора.</p><p>Независимо от типа отображаемого элемента, значение атрибута id может быть использовано только один раз на странице. Если id присутствуют, то они должны быть зарезервированы для важных элементов.</p><p>В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id . Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe .</p><p> #shayhowe { ... } </p><p> <div id="shayhowe">...</div> </p><h3>Дополнительные селекторы</h3><p>Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.</p><p>Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.</p><h2>Подключение CSS</h2><p>Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head> нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.</p><h3>Другие варианты добавления CSS</h3><p>Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.</p><p>Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.</p><p>Внутри элемента <head> применяется элемент <link> , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.</p><p>В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.</p><p>Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.</p><p>На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.</p><h2>Использование сброса CSS</h2><p>Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.</p><p>Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.</p><p>Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5.</p><p>Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.</p><h3>Кроссбраузерность и тестирование</h3><p>Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта.</p><p>Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.</p><h2>На практике</h2><p>Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.</p><ol><li>Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.</li><li>Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.</li><p>Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p>Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.</p><p> /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } / HTML5 display-role reset for older browsers / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }</p><li>Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link> в <head> , сразу после элемента <title> .</li><li>Поскольку мы указываем на стили через элемент <link> добавьте атрибут rel со значением stylesheet .</li><p>Мы также включим ссылку на наш файл main.css используя атрибут href . Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href , который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Styles Conference

Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.
Рис. 1.04. Наш сайт Styles Conference со сбросом CSS
Демонстрация и исходный код
Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Резюме
Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.
Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.
Напомним, что мы рассмотрели следующее:
Разница между HTML и CSS.
Знакомство с элементами HTML, тегами и атрибутами.
Настройка структуры вашей первой веб-страницы.
Знакомство с селекторами CSS, свойствами и значениями.
Работа с селекторами CSS.
Указатель на CSS из HTML.
Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.
Ресурсы и ссылки
Common HTML terms via Scripting Master
CSS Terms & Definitions via Impressive Webs
CSS Tools: Reset CSS via Eric Meyer

Еще несколько лет назад требования к сайтам были достаточно низкими. Их оформление не изобиловало анимацией, изображениями, различными динамическими элементами, а структура ресурсов была достаточно однотипной. Но с развитием технологий “вес” и объем сайтов значительно возросли. Сейчас практически каждая вторая компания имеет собственный ресурс в сети. При этом его структура является достаточно разветвленной и на нем может насчитываться несколько десятков или даже сотен страниц.

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

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

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

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

Некоторые особенности проектирования структуры web-сайта

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

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

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

Предусмотрите простой и быстрый доступ ко всем наиболее важным разделам со всех страниц сайта.

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

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

Для того, чтобы разработка структуры веб-сайта была максимально комфортной, ее можно отобразить с помощью компьютерных программ, таких как MS Visio, Power Point или обычный Paint. Таким образом Вы сможете в графическом виде составить набор необходимых страниц, а также продумать их связи друг с другом. Также можно воспользоваться обычной ручкой и бумагой, чтобы нарисовать структуру ресурса. Стоит отметить, что для подобных целей существует специализированное ПО, но его использование не целесообразно при создании небольших сайтов.

Структура сайта разделяется на внутреннюю и внешнюю. При этом внутренняя структура зачастую значительно влияет на внешнюю.

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

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

Различают четыре основные типовые структуры сайтов. В чистом виде каждая из них используется достаточно редко. Чтобы сделать сайт максимально удобным для пользователя и не навредить его функционалу следует грамотно комбинировать различные виды структур web-сайтов.

Линейная структура сайта

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

Решетчатая структура сайта

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

Иерархическая структура сайта

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

Паутинообразная структура сайта

Она предполагает связь страниц “все со всеми” то есть пользователь может попасть с любой страницы ресурса на любую другую страницу, минуя все разделы. Разработка структуры веб-сайта подобного типа достаточно сложна, особенно если на ресурсе расположено много страниц. На практике пользователь просто “потеряется” в огромном количестве ссылок. Стоит отметить, что данная структура web-сайта повторяет в малом масштабе структуру всемирной сети Интернет.

Создание гибридной структуры сайта для повышения удобства его использования

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

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

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

Разработка структуры для сложных многостраничных сайтов

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

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

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

Составьте четкую иерархию для разделов и подразделов сайта. К примеру, перейдя в раздел “Бытовая техника” пользователь должен увидеть список страниц ее производителей или типов техники (электрочайники, холодильники и т.д.), которые представлены на сайте.

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

После того, как структура web-сайта описана, можете нарисовать связи между страницами. Это поможет Вам упростить восприятие строения ресурса.

Структура бизнес-сайтов и сайтов-визиток

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

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

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

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

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

Для структурирования информации на небольших сайтах, часто применяют модифицированную линейную структуру. От классической структуры она отличается тем, что с определенной страницы имеет несколько ответвлений. Это позволяет посетителям быстрее попасть на интересующую их страницу. И хотя на первый взгляд недостатки такого типа структуры очевидны: ответвлений мало, свобода посетителей ограниченна. Тем не менее, данный способ структурирования имеет неоспоримое достоинство, а именно, дает уникальную возможность контролировать поведение пользователей. Например, в интернет-магазине, можно направить посетителя на страничку с рекламным описанием товара, потом дать информацию о бонусах, различных скидках, и только после этого разрешить доступ к страничке с ценами.

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

Структура страницы веб-сайта

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

Структурно дизайн поделён на три части:

верхняя - header . Включает в себя, как правило, верхнюю и левую часть дизайна со статической информацией (логотипом, лозунгом и так далее), верхним горизонтальным меню и левым меню (если они есть в дизайне). Может включать в себя информационные динамические материалы.

основная рабочая область - work area . Рабочая область страницы, в которой размещаются собственно информационные материалы веб-сайта. В качестве Основной рабочей области может подключаться как физический файл, так и создаваемый системой на основе комплексных компонентов динамический код.

Если в качестве Основной рабочей области подключается физический файл, то такая страница называется статической. Если подключается динамический код, то такая страница называется динамической.

нижняя - footer . Включает в себя, как правило, статическую информацию (контактная информация, сведения об авторе и владельце веб-сайта и так далее), нижнее горизонтальное меню и правое меню (если они есть в дизайне). Может включать в себя информационные материалы.

Эти три части могут занимать разную площадь, иметь разную форму. Неизменно одно: их порядок.

Верхняя и нижняя части дизайна формируются на основе шаблона дизайна веб-сайта, т.е. информация, отображаемая в данных областях, определяется параметрами шаблона веб-сайта.

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

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

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

Прежде чем приступить непосредственно к созданию сайта, нужно определиться с его типом. Ниже приведена примерная классификация интернет-сайтов, условно разбитая на группы.
Содержание:
§ 1. Виды структур сайтов

§ 2. Правильная структура сайта

§ 3. Число страниц сайта

§ 4. Навигационное меню

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

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

§ 1. Виды структур сайтов

1. Линейная - это структура, построенная по типу слайд - шоу. Пользователи просматривают web-ресурс страница за страницей.

Линейная структура сайта

2. Древовидная структура - самая популярная структура, которая подходит для всех видов сайта. Главное, что нужно помнить при построении «сайта-дерева» с многочисленными ветвями в виде страниц и «под - страниц», чтобы ресурс «рос» и развивался не только вширь, но и в глубь.

Древовидная структура сайта

3.Гибридная структура сайта - наиболее используемый вариант построение веб ресурсов. Представляет собой смешанный вариант линейной и древовидной.

Гибридная структура сайта

4. Решетчатая структура - довольно сложна и используется в основном в каталогах. Плотно связана с навигационным меню. Горизонтальные и вертикальные страницы логически связаны, что позволяет быстро переходить от одного элемента к другому.

Решетчатая структура сайта

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

У каждого сайта есть шапка, где пишется заголовок (подзаголовок) сайта, навигационное меню - названия рубрик, меток и другая полезная информация, основная часть сайта, где публикуется основная информация, подвал, где показана некоторая служебная информация.

Внешняя структура

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

Наиболее популярные mind map или Visio.

Создание сайта и его разделов - кропотливая и ответственная работа.

§ 2. Правильная структура сайта

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

Cделайте HTML карту сайта , на которой будут ссылки на все страницы сайта.

Cтруктура сайта должна быть упорядочена и понятна.

Пример чистой структуры URL:

mysite.ru/Category1/Product1

mysite.ru/Category1/Product2

mysite.ru/Category2/Product3

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

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

В URL используйте ЧПУ, например:

правильно — site.ru/razdel/chto-takoe-chpu/

неправильно — site.ru/category_id=2/?page_id=12/

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

На всех страницах сайта используйте навигационные цепочки (хлебные крошки) это поможет пользователям и поисковым системам легко ориентироваться на сайте.

§ 3. Число страниц сайта

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

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

СКОЛЬКО ДОЛЖНО БЫТЬ ВНУТРЕННИХ ССЫЛОК СО СТРАНИЦЫ САЙТА?

Определение количества ссылок на странице должно подчиняться следующим закономерностям:

Если вы хотите продвинуть страницу в ТОП выдачи, то облегчить это попадание позволит перераспределение ссылок в пользу нужных страниц.

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

Если же нужно увеличить вес каждой внутренней ссылки , то необходимо уменьшить их количество, например, убрать лишние виджеты (блок «Лучшие статьи», облако тэгов, самые популярные статьи и т.д.) и т.д.

Какой размер статьи на сайте должен быть для эффективного продвижения?

Примерный размер статьи для эффективного продвижения должен быть 2500-3000 символов без пробелов. При этом текст статьи сайта должен быть разбавлен картинками, причём картинки нужно вставлять в текст статьи, а не за её пределами.

Чем больше страниц на вашем сайте проиндексировано поисковыми системами, тем больше трафика ваш сайт может получать с поиска.

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

Публикуя на своём сайте уникальную, актуальную и интересную для целевой аудитории информацию о своей деятельности Вы:

формируете имидж,

становитесь экспертом в глазах как потенциальных так и текущих клиентов,

получаете последователей,

запускаете сарафанное радио,

по мере увеличения количества публикаций, увеличиваете количество получаемого сайтом поискового трафика.

§ 4. Навигационное меню

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

Навигационные компоненты включают в себя:

1. Глобальная навигация;

2. Локальная навигация;

3. Вспомогательная навигация;

4. Фильтры категорий, ценовых границ и т. п.;

6. Футер, дублирующий элементы глобальной, локальной и вспомогательной навигации страницы.

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

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

Главная страница→ Раздел→ Подраздел→ Текущая страница.

Все злементы в цепочке, кроме конечной, должны быть ссылками.

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

виды навигации

Виды навигации можно выделять исходя из двух критериев: функционального и визуального.

По функциям система навигации делится на следующие виды:

Языковая - навигация, отвечающая за языковой интерфейс и отображение контента на выбранном пользователем языке.

Основная - это наиболее важные разделы сайта, как правило меню.

Глобальная - это те ссылки, которые должны быть видны с любой страницы сайта, например ссылка на главную.

Рекламная - ссылки для привлечения посетителей на рекламные страницы сайта с расположением товаров и услуг.

Тематическая - навигация по страницам сайта одной определенной тематики (рубрики).

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

Указательная - по-другому, справочная. Гиперссылка указывает, в какой области сайта сейчас находится посетитель.

Географическая - используется на сайтах, где имеются разделы, посвященные разным странам.

По визуальному оформлениювыделяют следующие виды навигации:

Текстовая - совпадает с определением текстовой в функциональном плане. Это, пожалуй, самый древний вид навигации.

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

HTML-формы - помогают в экономии места с помощью выпадающих или открывающихся элементов.

Java и Flash технологии - с помощью них можно организовать определенную реакцию на действия при наведении курсора, нажатии кнопок мыши или клавиатуры.

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне - признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!