Урок. Постраничная навигация по сайту.
Доброго времени суток!
Сегодня по просьбе многих моих подписчиков, решил добавить текстовый урок по страничной навигации по сайту.
Вот пример того, что мы будем делать:
1 2 3 4 5 6 7 8 9 10 далее...
Для того, чтобы создать такое меню нам понадобится:
1) Создать таблицу 1 строка 11 столбцов (столбцов, делайте, сколько вам надо).2) Вписать в каждую ячейку цифры 1, 2,3, 4....10, далее...
3) Теперь вам каждой цифре нужно дать ссылку на страницу куда переходить.
Сами ссылки лучше дать относительные, чтобы без проблем работали 2 ваших сайта:
На http://ваш-логин.narod.ru/ и на http://ваш-логин.narod2.ru/
Что такое абсолютная и относительная ссылка? В чём их различие?Пример абсолютной ссылки: http://showsbike.narod.ru/shou_2010/
Пример относительной ссылки: shou_2010/
Относительные ссылки используются для перелинковки вашего сайта, для перехода внутри сайта.
Можно сказать относительная ссылка, это остаток от абсолютной ссылки, которая получается путём отнимания основного домена (ссылки с главной страницы сайта).
4) Идёте и создаёте у себя в конструкторе нужные вам страницы с описанием.
5) Публикуете новые страницы для сайта, и берёте от них относительные ссылки, которые вставляете в вашу таблицу.
6) Теперь все страницы, которые используют вашу новую навигацию 1, 2, 3, 4...10, далее... в конструкторе сайтов необходимо снять данные страницы с показа в основном меню. Для этого вам необходимо пройти в и открыть модуль с вашим меню, и убрать там галочки напротив страниц которые вы не хотите показывать.
Привожу пример кода в html.
|
ВНИМАНИЕ!
В ДАННОЙ ТАБЛИЦЕ ССЫЛКИ НЕ ПРОСТАВЛЕНЫ!
Это нужно сделать самостоятельно.
Пояснения к коду html.
Где width="350" - это ширина таблицы.
border="0" - Рамка во круг таблицы.
align="center" - Выравнивание посредине.
cellpadding="2" cellspacing="2" - Отступы внутри ячейки, и между ячейками.
bgcolor="#CCCC99 - это цвет фона таблицы (светло коричневый, можно свой)
<a href="shou_2010/">1</a> - Ссылка для перехода на другую стр.
(здесь стоит относительная ссылка, можно ставить и абсолютную, но тогда у вас
меню будет работать только на том сайте narod или narod2, ссылки на который
вы сделаете)
Ссылки по аналогии нужно проставить на все цифры в таблице.Пример такого меню смотрим в моём каталоге: http://you-sayt.narod.ru/katalog-1.html
Пока там 1 рабочая страница, но по мере поступления заявок, станут активными и другие страницы каталога.Скопируйте код меню с постраничной навигацией. Для этого выделите его мышкой и нажмите CTR+C теперь откройте блокнот и вставьте туда код html CTR+V.
Отредактируйте ваши ссылки и вставьте теперь ваш код конструкторе на народе с помощью вставки произвольного кода, или текстового кода в раскладке html.
Надеюсь у вас получиться не хуже, чем у меня:
Навигация по урокам.
1 2 3 4 5 6 7 8 9 10 далее...
По аналогии можно создать и вертикальное меню, только теперь у нас будет
11 строчек и 1 столбец.
Привожу пример кода вертикального меню в html.
|
Как вы заметили, здесь я не поставил ширину таблицы, она сформируется автоматически по максимальной длине строчки в меню, но вы можете и задать сами ширину таблицы параметром: width="350" - где 350 это ширина таблицы в пикселях.
Если вам данного меню мало или не достаточно, то могу предложить
вам меню на CSS которое меняет цвет фона и текста при наведении.
Более подробно просмотреть и узнать как сделать html код смотрите на форуме: Здесь
(Там есть пример горизонтального и ветикального меню, html код с подсказками.)
Построение меню идёт с помощью html тегов: <ul> и <li>;
Полезный сайтик по html коду.
Удачи в САЙТА СТРОЕНИИ!
У нас на сайте можно подписаться на обучающий видеокурс "Делаем Сайт Самостоятельно На Яндекс Народ"
Вы узнаете: Как создать сайт на народе. Изучите создание сайта на народе в конструкторе сайтов.
Научитесь, как сделать сайт бесплатно и быстро.
Copyright © 2010-2012. Александр Новиков. Все права защищены.
