666

Как сделать красивую и удобную навигацию или меню на своем сайте или блоге

Планирование навигации сайта

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



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

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

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


Делаем красивое горизонтальное меню для сайта с помощью HTML и CSS,

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

Я пользуюсь текстовым процессором «EditPlus». Вам я рекомендую использовать именно его. Теперь приступим к созданию основного файла, в котором будет наш главный код, выводящий всё меню.

Создайте на рабочем столе папку и назовите её, например «Меню». Откройте «EditPlus» и создайте в нем два файла: HTML файл и файл CSS.

Сохраните оба файла в папке под следующими именами: для HTML – index.html, для CSS – style.css.

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

DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>

New Document

Мы вставили строку подключения между открывающим и зарывающим тегом элемента HEAD. Эта строка выглядит так:

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


Итак, представим, что у нас есть 5 ссылок, которые должны быть в горизонтальном меню. Я для примера взял следующие имена ссылок: «Главная», «Карта сайта», «Контакты», «Об авторе», «Товары и услуги». Сейчас мы займемся формированием этих слов в горизонтальное меню.

Перейдите на файл index.html и между элементами … вставьте следующий код:

Главная

Товары и услуги

Об авторе

Карта сайта

Контакты

Итак, мы вставили элемент DIV. Первый элемент DIV имеет класс navigation, для него мы потом зададим стили, и также он содержит вложенные в него 5 элементов DIV с классом menu. Если открыть файл index.html в браузере, то картина будет примерно такая:
Главная
Товары и услуги
Об авторе
Карта сайта
Контакты

Чтобы выровнять по горизонтали наше меню перейдите в файл style.css и впишите туда следующий код:

/* CSS Style */
.menu {
float:left;
border:0;
}

Первая строка – строка комментария. Далее я задал стиль для класса menu с обтеканием по левому краю, о чем говорит элемент float со значением left, и задал на всякий случай рамку, равную нулю.

Теперь еще раз загрузите файл index.html в браузер или обновите, если он уже загружен, и вы увидите, что меню сделалось по горизонтали.


Теперь приведем меню в человеческий вид и допишем стиль для класса menu. Выглядеть это будет так:

.menu {
float:left;
border:0;
margin-right:10px;
font-family:Verdana, Arial;
font-size:12px;
}

Я добавил отступ от правого края (margin-right:10px;) равный 10 пикселям. Затем изменил шрифт на Verdana, а в случае, если у пользователя не окажется такого шрифта на компьютере, то текст измениться на Arial. Уж этот шрифт есть у каждого.

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

Главная

Товары и услуги

Об авторе

Карта сайта

Контакты

Я проставил для каждого пункта меню свою ссылку. У вас будут свои ссылки на разделы. Также задал описание для каждой ссылки (атрибут title). Теперь давайте посмотрим, что же у нас получилось, и обновим файл в браузере. Весь текст превратился в гиперссылки и стал, синим цветом с подчеркиванием (наблюдаю из браузера Google Chrome).


Теперь пропишем стили для активной ссылки, для ссылки при наведении и для посещенной ссылки. Перейдите в файл style.css и допишите следующий код:

.menu a {
font-family:Verdana, Arial;
font-size:12px;
color:#026eba;
font-weight: bold;
text-decoration: underline;
}
.menu a:hover {
font-family:Verdana, Arial;
font-size:12px;
color:#058cea;
font-weight: bold;
text-decoration: none;
}
.menu a:visited {
font-family:Verdana, Arial;
font-size:12px;
color:#054978;
font-weight: bold;
text-decoration: underline;
}

Первый стиль (.menu a) для обычной ссылки, второй (.menu a:hover) для ссылки при наведении курсора и третий (.menu a:visited) для посещенной ссылки.


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

.navigation {
padding-left:10px;
padding-top:15px;
border:1px solid #155d90;
width:440px;
height:35px;
background-color:#f6fbff;
}

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

Здравствуйте, это Я!

Итак, мы с Вами подобрались к той части сайта, где Вам желательно представиться посетителям во всей своей красе. Что это значит? Знакомимся с потенциальными клиентами ближе – вызываем доверие.

или

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

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

Следующее – пишем свои имя и фамилию. Люди должны знать с кем имеют дело. Ниже ставите свои контакты – е-мэйл, скайп, телефон. Тут Вы выбираете сами. Конечно, если поставите голосовое сообщение – просто сказка! Еще 25% льда между Вами и посетителями Вашего сайта считайте, что уже растопили. Сделать такое сообщение не просто – а очень просто. Все, что понадобится – небольшой текст, программка и микрофон. А как все это сделать, может подсказать мой наставник – Азамат Ушанов.

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