RSS-лента

Урок № 18. Создаём Меню для нашего Сайта.

Автор: Андрей Краснокутский

Дата: 2010-01-28

Навигация по сайту.

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

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

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

В этом уроке мы как раз и займемся разработкой Меню для сайта и постараемся учесть всё вышесказанное. Подберём название для Разделов сайта, причем отдельно выделим в Меню Заголовки и Разделы. Для каждого из этих элементов создадим отдельный стиль оформления в Каскадной Таблице Стилей CSS.

Для удобства дальнейшей работы, оградим Меню сайта Комментариями.

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

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

Урок представлен в двух вариантах:

1. Текстовый вариант в формате PDF, Вы можете распечатать урок на принтере, и повторять шаг за шагом держа перед глазами печатный вариант урока или изучать этот урок лежа на диване :). Текстовая версия урока снабжена подробными поясняющими скриншотами и картинками. Размер архива: 1,26 Мб. Приобрести урок № 18 в PDF формате+Исходник.
2. Второй вариант представлен в том же текстовом формате и в Видео формате: PDF + Видео . Видео версия урока, записана с монитора. Текстовый формат Вы можете так же распечатать на принтере. В Видео уроке я Вам буду показывать, и комментировать голосом все необходимые действия. Вам останется только все это повторять. Продолжительность Видео урока: 26:15 мин. Урок доступен в составе Обучающего Видео Курса: "Сайт от А до Я" Урок № 18 в формате Video + PDF.

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

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

Приобрести урок № 18 в формате PDF+Исходник.
Размер архива: 0,6 Мб.

Урок доступен в составе Обучающего Видео Курса: "Сайт от А до Я":
Урок № 18 в формате Video + PDF.
Продолжительность Видео урока: 26:15 мин.

Другие уроки Обучающего Курса: Сайт от А до Я

Сайт своими руками от А до Я. Обучающий курс. О чем этот курс?

Урок № 01. Ищем тему для создания Вашего сайта и определяем «Востребованность сайта» Бесплатный ознакомительный урок (PDF).

Урок № 02. Программы необходимые для создания сайта и настройка этих программ.

Урок № 03. Создаём первый HTML файл в программе Dreamweaver и в ручном режиме в Notepad++

Урок № 04. Разбираем структуру HTML документа. Работаем в программе Dreamweaver.

Урок № 05. Изучаем таблицы в редакторе Dreamweaver CS 3. Закрепляем навыки в редакторе Notepad++

Урок № 06. Создаём «каркас» сайта в программе Dreamweaver CS 3.

Урок № 07. Делаем header (верхний графический элемент) для сайта в программе Photoshop.

Урок № 08. Заканчиваем изготовление header (Верхнего графического элемента) для сайта в программе Photoshop.

Урок № 09. Делаем footer (нижний графический элемент) для сайта в программе Photoshop.

Урок № 10. Устанавливаем Хеадер и Футер в "Каркас сайта" в программе Dreamweaver.

Урок № 11. Наполняем web-страницу текстом в программе Dreamweaver.

Урок № 12. Форматируем текст на web-странице в программе Dreamweaver CS3.

Урок № 13. Учимся создавать Заголовки и изменять Фоновый цвет web-страницы в программе Dreamweaver CS3.

Урок № 14. Готовим графику в Photoshop. Учимся создавать галереи изображений в программе Dreamweaver CS3.

Урок № 15. Подключаем к Сайту Каскадную Таблицу Стилей CSS в программе Dreamweaver CS3.

Урок № 16. Восстанавливаем созданные ранее стили с помощью CSS в файле style.css

Урок № 17. Дорабатываем дизайн сайта с помощью CSS.

Урок № 18. Создаём Меню для нашего Сайта.

Урок № 19. Проверяем внешний вид сайта в разных Браузерах. Создаём новые разделы Сайта.

Урок № 20. Учимся делать Гиперссылки. Заканчиваем оформление Меню сайта.

Урок № 21. Создаём страницы Третьего уровня. Формируем структуру сайта.

Урок № 22. Завершаем формирование структуры сайта. Формируем страницы Второго уровня.

Урок № 23. Покупаем и Регистрируем Доменное имя для сайта.

Урок № 24. Покупаем Хостинг для сайта.

Урок № 25. «Закачиваем» сайт на Хостинг. Ура!!! Наш сайт заработал в Интернете.

Просмотров: 8829

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Добавить Ваш комментарий:

Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

С нами сделать сайт сможет даже Ребёнок! "Сайт от А до Я" Узнать сейчас >>> Хотите заработать? 2-х Уровневая Партнерская программа! Присоединяйтесь.

Последние заметки

Статистический отчет Форма № 7-травматизм "Сведения о травматизме на производстве и профессиональных заболеваниях"

Какие отчеты необходимо сдать Специалисту по охране труда за год

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT