Прошлая статья, если Вы помните, закончилась тем, что мы создали первую статью сайта, которая, кстати, вполне может стать статьей для его главной страницы. Пусть так и будет. Тогда на главной странице создадим меню, состоящее из разделов сайта. Для меню у нас есть правый и левый сайдбары. В каком создавать меню для сайта? Да в каком хотите! Я делаю в левом. Для этого в левом сайдбаре я просто столбиком набираю пункты будущего меню:
Меню будем делать в виде маркированного списка. Для этого расставим каждый пункт чрез строку с помощью клавиши Enter, выделим их и щелкнем на значке Неупорядоченный список в нижнем доке редактора:
Обратите внимание на левый отступ списка. Во-первых, получается как-то не очень красиво, а во-вторых, в разных браузерах этот отступ будет разным, так как каждый браузер рассчитывает зазоры и отступы по-своему. Это свойство браузеров может (и наверняка так и будет) доставить Вам много неприятностей не только в создании меню для сайта а и в дальнейшей его верстке. Чтобы решить эту проблему, мы немного поработаем руками с таблицей стилей. А именно. Отроем ее и в самом начале таблицы вставим вот такой код:
* {
border: 0;
margin: 0;
padding: 0;
}
Это код не является каким-либо тегом. Это прямое указание для всех браузеров «обнулять» все зазоры и отступы. А если нам нужно будет где-то не нулевой отступ или зазор, то мы зададим его сами в таблице стилей. Возвращаемся к меню для сайта.
Если мы откроем нашу страницу в браузере, все равно в каком, то увидим, что наше меню ушло влево, а текст статьи вплотную лег на картинку. Меню нам еще предстоит оформлять, а проблему с картинкой решим прямо сейчас. Для этого создадим для нее стиль, в котором в категории Рамка задаем отступ в 5 пикселей:
Привязываем стиль к картинке и проблема решена. Возвращаемся к созданию меню для сайта. Чтобы сделать красивое меню, создадим стиль для тега маркированного списка ul точно так же, как это было сделано для тега body:
В категории Тип — задаем размер шрифта 110%
В категории Рамка, в меню Поля – Слева: 15 пикселов
Уже намного лучше. А чтобы было еще лучше, раздвинем пункты меню по высоте. Как это сделать. Каждый пункт нашего меню, так как это маркированный список, описывается тегом li. Создадим для этого тега свое правило поведения. Точно так же как мы делали стиль для тега ul, сделаем стиль для тега li. В котором в категории Тип задаем высоту строки 25 пикселей.
После этих манипуляций меню для сайта станет таким:
И все, что осталось в этом меню сделать, так это создать гиперссылки на внутренние страницы сайта, при условии, что это наша главная страница. Что такое гиперссылки и как их создавать Вы уже знаете из статьи Связываем страницы сайта. Гиперссылки.
А нужно просто выделить пункт меню для сайта, в нижнем доке редактора с правой стороны, в окошке Ссылка набрать адрес страницы и нажать Enter. И так с каждым пунктом. Если у Вас не задано оформление гиперссылок, то вид у них будет, как и у всех стандартных гиперссылок, то есть синий цвет и подчеркивание. Если Вас не устраивает такой вид, то его очень легко изменить. Для этого нужно создать стили для гиперссылок. Называются такие стили - псевдостили гиперссылок. Об этом Вы тоже подробнее можете узнать в вышеуказанной статье. А мы сейчас создадим два псевдостиля – для непосредственно ссылки:
В категории Тип — задаем цвет шрифта #008800
И аналогично для ссылки с наведенным курсором:
В категории Тип — задаем цвет шрифта #00CC00:
Меню сайта готово.
Что затолкать в правый сайдбар, я думаю, Вы и сами найдете. Это может быть реклама, баннеры, ссылки на родственные сайты и.т.д.
В футере обычно вставляют символ авторского права и строгую надпись типа — Копировать материалы сайта запрещено! От копирования Ваших статей это конечно не защитит, но такова традиция… Кроме того в футере ставят счетчики посещений сайта. Да Вы и сами это знаете.
Ну вот, с меню для сайта мы разобрались. Надеюсь, все было понятно. Остался у нас недоработанный хедер. Бросили мы его, но не забыли. Вернемся к нему в следующей статье
да, и можно ли в меню перетаскивать созданные рубрики. Что-то не получается поменять местами
А зачем их перетаскивать? Не нравиться — сделать другую! Делов-то на копейку!