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

Почему именно css-меню?

Ведь есть всякие программки которые делают красивые flash-меню, Да даже с помощью Java можно сделать более красивое меню. Ответ очень прост, ни Flash ни Java не индексируются поисковиками, а значит поисковик не сможет попасть туда куда может попасть сам пользователь. Конечно можно продублировать кнопки ссылками внизу экрана, или даже прописать в карту сайта. Но зачем столько мороки ради того что пользователь просто не заметит.

Вы делаете красивую фиху на сайте и что получается? Вы на эту фиху будете любоваться примерно месяц, также будут любоваться друзья которые повелись на фразу "смотри как я круто сделал" ну и ещё процентов 50 пользователей заценят и забудут. Потому что сайт делается не для демонстрации ваших творческих возможностей в придумывании фишек для сайта, а в его информативности. Как часто вы бываете на сайте с установкой элементов Activ-x где на главной странице вместо шапки флеш видео-ролики с человеками? Зашли скачали и забыли, именно потому что там больше делать в принципе нечего, хотя красиво.

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

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

Вот почему именно CSS меню.

В этом уроке мы научимся делать простое меню, с одинаковым фоном в двух режимах, и изменением назначения кнопки простым изменением в main.tpl
А так-же рассмотрим фиху которая встроена уже в движок DLE - как сделать чтоб кнопка оставалась в активном состоянии, при нахождении посетителя на странице куда она ведёт.

Онлайн(качество сильно занижено):



Дополнительно:

text-align:значение определяет выравнивание текста внутри элемента. Имеет значения left - выравнивание по левому краю, right - выравнивание по правому краю, center - выравнивает по центру и justify - выравнивание по правому и левому краю, при этом расстояние между словами изменяется.

прим. text-align:center;



list-style-type:значение устанавливает тип маркера для ненумерованного списка [/b] и нумерованного [b] и имеет следующие значения.
Для ненумерованного: disc - кружочек, circle - кружочек с пустотой внутри, square - квадратик.
Для нумерованного: decimal - цифры, lower-roman - что то вроде римской нумерации маленькими буквами, upper-roman - римская но большими, lower-alpha - буквенная нумерация в нижнем регистре, upper-alpha - буквенная в верхнем регистре