НАСТРОЙКА МЕНЮ
Универсальное меню
Рассмотрим подробно на примере универсального меню. Главное меню вы можете настроить в дальнейшем по аналогии, т.к. оно имеет более простой характер.
Для начала, кликнем на странице проекта правой кнопкой мыши и зайдем в "свойства проекта", На вкладке "меню" выберем Раскрывающееся дерево меню
Рис. 34
Совет: В дальнейшем при желании тип меню можно поменять, зайдя в свойство проекта. Но, надо учитывать, что настройки придется пересмотреть, подрегулировать.
В данный момент меню в проекте не видно, это потому что пункты изначально имеют белый цвет. Давайте зайдем в дерево дизайна F4 и настроим меню так, как нам нужно. Откроем пункт Меню\Универсальное меню\Таблица меню.
Немного теории о подпунктах в закладке меню:
Левый бордюр - Ячейка слева от пункта меню (возможность поставить иконку или иное изображение, либо задать отступ)>
Ячейка Основного меню - выделяет полностью весь блок пункта с его отступами и текстовой информацией>
Правый бордюр - Ячейка по правую сторону от пункта меню (возможность поставить иконку или иное изображение, либо задать отступ)>
Разделитель - блок между пунктами меню (возможность поставить разделение с помощью отступов или с помощью прикрепленного изображения)
Пункт меню - основной пункт (здесь задаются основные настройки пунктам меню)>
Активный пункт - выделяет и дает возможность настроить активный пункт - страницу, на которой мы находимся в данный момент>
Пункт меню при наведении на него курсором - возможность настроить эффект пункта меню, когда наводим на него курсором>
2й уровень - пункт с подвложениями, где также настраиваются пункты меню второго и третьего уровня (актуально для проектом, где меню имеет сложный характер). Пункты 2го и 3го уровня заимствуют настройки 1 уровня, но могут быть настроены позже по-другому (незначительные изменения дизайна).
Рис. 35
Исходя из (рис.35), зададим настройки "пункту меню":
Вкладка "Шрифт":
Цвет: #666666
Начертание: Tahoma
Размер: 14
Вес шрифта: bold
Подчеркивание: none
Вкладка "Фон":
Изображение: menu_punkt.gif (возьмите из папки с исходными материалами)
Повторение: no-repeat
Вкладка "Позиционирование":
Общая ширина: убрать все значения
Общая высота: убрать все значения
Выравнивание: убрать значение left
Тип контейнера: block
Совет: не допускайте, чтобы у блока стояли одновременно 2 параметра "block" и "left", т.к. цель у них разная. Block приводит объект к более жесткому режиму (обычно ставится текстовым объектам и информационным блокам, ссылкам), left же ,Юстарается расположить объекты друг за другом по строчке (пристыковывая нижний справа). Также с параметром block в паре может стоять.
Совет: если же места у меню не ограничено жестким размером, размер пунктов меню можно не указывать (как в данном случае). В остальных лучше укажите, либо в процентном, либо в пиксельном варианте.
Для того, чтобы текст не перекрывал загруженное изображение, нам нужно сдвинуть текст. Будьте внимательны, задавая отступы текста. Не во всех местах можно выставлять их. И в большинстве случаев необходимо найти золотую середину, чтобы при выставленных настройках, текст в меню смотрелся одинаково адекватно во всех браузерах.
Для нашего случая задайте такие настройки:
При выделенном "пункте меню"
Вкладка "Расположение текста":
Отступы текста: сверху - 11, снизу - 5
Горизонтальное выравнивание: left
Вертикальное выравнивание: top
Вкладка "Граница" (сделаем разделение пунктов меню, задав подчеркивание снизу):
Напротив значения "низ" выставьте сначала значение "dotted", затем чуть справа выберите цвет (можете поставить такой - #c0c0c0)
Рис. 36
Совет: При выделенном "пункте меню" во Вкладке "Расположение текста" будьте внимательны, когда задаете отступ тексту слева и справа. В большинстве случаев это приводит к сдвигу других блоков, расположенных рядом с меню.
Зададим отступ текста с левого края, так, чтобы он не перекрывал изображение В "пункте меню" есть пункт "текст", выделим его и зададим след. Настройки:
Вкладка "Позиционировании":
Тип контейнера: block
Отступы (на этой же вкладке): Слева - 25
Рис. 37
Теперь Настроим "Активный пункт меню", чтобы мы всегда визуально видели отличие, на какой странице мы находимся.
"Активный пункт меню"
Вкладка Шрифт:
Поставим всего один параметр "Цвет" - #86c510 (т.к. остальные параметры заимствуются от "пункта меню")
Теперь раскроем Активный пункт и поставим отступ на вкладке "Расположение текста" (Слева - 25). Других параметров в этом пункте задавать не обязательно.
Рис. 38
По аналогии можете выделить каким-то образом пункт при наведении на него курсора. В данном случае выбран цвет шрифта - черный.
Теперь зададим отступы Всему меню, чтобы оно не было "прилеплено" к остальным блокам. Для этого выделим
Пункт "Универсальное меню", зайдем на вкладку "Позиционирование" и зададим след. Параметры:
Слева - 10,
Общая ширина: 84% (параметр приблизительный)
Совет: ширину меню можно указывать не только в %-ном соотношении. В других дизайнах можно ограничить жестко до определенного значения. Все зависит от используемой графики и ширины полезного места, в котором располагается меню.
Рис. 39
Теперь попробуем настроить Многоуровневое меню (трехуровневое меню можете настроить в дальнейшем по аналогии). Для этого симитируем обстановку многоуровнего меню. Зайдем в "Список страниц" (F11), и добавим к универсальному меню еще пункты. Можете добавить (создать) новые страницы, а можно поэкспериментировать на существующих.
Выделим поочередно страницы и поставим галочки под пунктом "Уровень (универсальное меню) - 2 уровень"
К примеру:
Карта сайта (выбрать галочку с пункта "добавить в главное меню")
Поиск
Регистрация
Далее вручную (или с помощью кнопок "вверх", "вниз") перенесите названия страниц чуть выше, так, чтобы они располагались ниже страницы "о компании" (страница выбрана по желанию).
Должна получиться следующая картина (Рис. 40)
Рис. 40
После расположения страниц нажнем в этом окне "ОК".
Поскольку у нас выбрано Раскрывающееся меню, это означает, что пункты второго уровня откроются в блоке меню после того, как мы нажмем на название страницы первого уровня, их содержащей. В данном случае это страница - "О компании" (если вы все сделали так, как на рис. 40).
Перейдем на страницу "О компании". Откроем дерево дизайна (F4). Раскроем "Меню/Универсальное меню/2-й уровень".
У пункта "2-й уровень" зададим следующий значения
на вкладке "Позиционирование":
Поставим Отступ слева - 20
Уберем общую ширину - 150
Также уберем значение "left" у параметра "Выравнивание"
На вкладке "Фон":
Уберем значение выставленного цвета "#FFFFFF"
Далее настроим пункт меню у 2го уровня меню
на вкладке "Позиционирование" и вкладке "Фон":
уберем все стоящие тут значения (у всех параметров)
на вкладке "Шрифт":
Цвет: #808080
Размер: 12
Вес шрифта: normal
На вкладке "Расположение текста"
Уберем имеющийся отступ слева - 10 (здесь отступ в данном случае не нужен)
Совет: отступ текста у пункта меню на вкладке "Расположение текста" лучше не задавать, т.к. может появится дополнительное смещение в некоторых браузерах. Блоки, расположенные рядом с меню, будут сдвинуты. Это актуально для более "жестких" дизайнов (где преобладают точные значения таблиц, колонок и ячеек)
Затем на нужно сдвинуть текст, чтобы он не сливался с картинкой в фоне. Способов есть несколько, но правильней это сделать след. Образом:
Выделим в пункте меню 2го уровня пункт "Текст" и зададим следующие параметры
Вкладка Позиционирование:
Уберем сначала все имеющиеся здесь значения у всех параметров
Оставим только напротив параметра "Отступ" значение "0" в самой левой ячейке
Отступ слева - 25
Отступ сверху - 1
Рис. 41
Теперь выделим у меню 2го уровня "пункт меню при наведении курсора"
На вкладке фон уберем выставленный изначально цвет (по желанию можете выставить свой)
Большинство настроек меню 2го и 3го уровня заимствует у пунктов 1го уровня, поэтому стоит только лишь внести небольшие изменения по дизайну.
Вверх
Для начала, кликнем на странице проекта правой кнопкой мыши и зайдем в "свойства проекта", На вкладке "меню" выберем Раскрывающееся дерево меню
Рис. 34
Совет: В дальнейшем при желании тип меню можно поменять, зайдя в свойство проекта. Но, надо учитывать, что настройки придется пересмотреть, подрегулировать.
В данный момент меню в проекте не видно, это потому что пункты изначально имеют белый цвет. Давайте зайдем в дерево дизайна F4 и настроим меню так, как нам нужно. Откроем пункт Меню\Универсальное меню\Таблица меню.
Немного теории о подпунктах в закладке меню:
Левый бордюр - Ячейка слева от пункта меню (возможность поставить иконку или иное изображение, либо задать отступ)>
Ячейка Основного меню - выделяет полностью весь блок пункта с его отступами и текстовой информацией>
Правый бордюр - Ячейка по правую сторону от пункта меню (возможность поставить иконку или иное изображение, либо задать отступ)>
Разделитель - блок между пунктами меню (возможность поставить разделение с помощью отступов или с помощью прикрепленного изображения)
Пункт меню - основной пункт (здесь задаются основные настройки пунктам меню)>
Активный пункт - выделяет и дает возможность настроить активный пункт - страницу, на которой мы находимся в данный момент>
Пункт меню при наведении на него курсором - возможность настроить эффект пункта меню, когда наводим на него курсором>
2й уровень - пункт с подвложениями, где также настраиваются пункты меню второго и третьего уровня (актуально для проектом, где меню имеет сложный характер). Пункты 2го и 3го уровня заимствуют настройки 1 уровня, но могут быть настроены позже по-другому (незначительные изменения дизайна).
Рис. 35
Исходя из (рис.35), зададим настройки "пункту меню":
Вкладка "Шрифт":
Цвет: #666666
Начертание: Tahoma
Размер: 14
Вес шрифта: bold
Подчеркивание: none
Вкладка "Фон":
Изображение: menu_punkt.gif (возьмите из папки с исходными материалами)
Повторение: no-repeat
Вкладка "Позиционирование":
Общая ширина: убрать все значения
Общая высота: убрать все значения
Выравнивание: убрать значение left
Тип контейнера: block
Совет: не допускайте, чтобы у блока стояли одновременно 2 параметра "block" и "left", т.к. цель у них разная. Block приводит объект к более жесткому режиму (обычно ставится текстовым объектам и информационным блокам, ссылкам), left же ,Юстарается расположить объекты друг за другом по строчке (пристыковывая нижний справа). Также с параметром block в паре может стоять.
Совет: если же места у меню не ограничено жестким размером, размер пунктов меню можно не указывать (как в данном случае). В остальных лучше укажите, либо в процентном, либо в пиксельном варианте.
Для того, чтобы текст не перекрывал загруженное изображение, нам нужно сдвинуть текст. Будьте внимательны, задавая отступы текста. Не во всех местах можно выставлять их. И в большинстве случаев необходимо найти золотую середину, чтобы при выставленных настройках, текст в меню смотрелся одинаково адекватно во всех браузерах.
Для нашего случая задайте такие настройки:
При выделенном "пункте меню"
Вкладка "Расположение текста":
Отступы текста: сверху - 11, снизу - 5
Горизонтальное выравнивание: left
Вертикальное выравнивание: top
Вкладка "Граница" (сделаем разделение пунктов меню, задав подчеркивание снизу):
Напротив значения "низ" выставьте сначала значение "dotted", затем чуть справа выберите цвет (можете поставить такой - #c0c0c0)
Рис. 36
Совет: При выделенном "пункте меню" во Вкладке "Расположение текста" будьте внимательны, когда задаете отступ тексту слева и справа. В большинстве случаев это приводит к сдвигу других блоков, расположенных рядом с меню.
Зададим отступ текста с левого края, так, чтобы он не перекрывал изображение В "пункте меню" есть пункт "текст", выделим его и зададим след. Настройки:
Вкладка "Позиционировании":
Тип контейнера: block
Отступы (на этой же вкладке): Слева - 25
Рис. 37
Теперь Настроим "Активный пункт меню", чтобы мы всегда визуально видели отличие, на какой странице мы находимся.
"Активный пункт меню"
Вкладка Шрифт:
Поставим всего один параметр "Цвет" - #86c510 (т.к. остальные параметры заимствуются от "пункта меню")
Теперь раскроем Активный пункт и поставим отступ на вкладке "Расположение текста" (Слева - 25). Других параметров в этом пункте задавать не обязательно.
Рис. 38
По аналогии можете выделить каким-то образом пункт при наведении на него курсора. В данном случае выбран цвет шрифта - черный.
Теперь зададим отступы Всему меню, чтобы оно не было "прилеплено" к остальным блокам. Для этого выделим
Пункт "Универсальное меню", зайдем на вкладку "Позиционирование" и зададим след. Параметры:
Слева - 10,
Общая ширина: 84% (параметр приблизительный)
Совет: ширину меню можно указывать не только в %-ном соотношении. В других дизайнах можно ограничить жестко до определенного значения. Все зависит от используемой графики и ширины полезного места, в котором располагается меню.
Рис. 39
Теперь попробуем настроить Многоуровневое меню (трехуровневое меню можете настроить в дальнейшем по аналогии). Для этого симитируем обстановку многоуровнего меню. Зайдем в "Список страниц" (F11), и добавим к универсальному меню еще пункты. Можете добавить (создать) новые страницы, а можно поэкспериментировать на существующих.
Выделим поочередно страницы и поставим галочки под пунктом "Уровень (универсальное меню) - 2 уровень"
К примеру:
Карта сайта (выбрать галочку с пункта "добавить в главное меню")
Поиск
Регистрация
Далее вручную (или с помощью кнопок "вверх", "вниз") перенесите названия страниц чуть выше, так, чтобы они располагались ниже страницы "о компании" (страница выбрана по желанию).
Должна получиться следующая картина (Рис. 40)
Рис. 40
После расположения страниц нажнем в этом окне "ОК".
Поскольку у нас выбрано Раскрывающееся меню, это означает, что пункты второго уровня откроются в блоке меню после того, как мы нажмем на название страницы первого уровня, их содержащей. В данном случае это страница - "О компании" (если вы все сделали так, как на рис. 40).
Перейдем на страницу "О компании". Откроем дерево дизайна (F4). Раскроем "Меню/Универсальное меню/2-й уровень".
У пункта "2-й уровень" зададим следующий значения
на вкладке "Позиционирование":
Поставим Отступ слева - 20
Уберем общую ширину - 150
Также уберем значение "left" у параметра "Выравнивание"
На вкладке "Фон":
Уберем значение выставленного цвета "#FFFFFF"
Далее настроим пункт меню у 2го уровня меню
на вкладке "Позиционирование" и вкладке "Фон":
уберем все стоящие тут значения (у всех параметров)
на вкладке "Шрифт":
Цвет: #808080
Размер: 12
Вес шрифта: normal
На вкладке "Расположение текста"
Уберем имеющийся отступ слева - 10 (здесь отступ в данном случае не нужен)
Совет: отступ текста у пункта меню на вкладке "Расположение текста" лучше не задавать, т.к. может появится дополнительное смещение в некоторых браузерах. Блоки, расположенные рядом с меню, будут сдвинуты. Это актуально для более "жестких" дизайнов (где преобладают точные значения таблиц, колонок и ячеек)
Затем на нужно сдвинуть текст, чтобы он не сливался с картинкой в фоне. Способов есть несколько, но правильней это сделать след. Образом:
Выделим в пункте меню 2го уровня пункт "Текст" и зададим следующие параметры
Вкладка Позиционирование:
Уберем сначала все имеющиеся здесь значения у всех параметров
Оставим только напротив параметра "Отступ" значение "0" в самой левой ячейке
Отступ слева - 25
Отступ сверху - 1
Рис. 41
Теперь выделим у меню 2го уровня "пункт меню при наведении курсора"
На вкладке фон уберем выставленный изначально цвет (по желанию можете выставить свой)
Большинство настроек меню 2го и 3го уровня заимствует у пунктов 1го уровня, поэтому стоит только лишь внести небольшие изменения по дизайну.
Главное меню
В данном случае главное меню является не основным, и располагается в нижней части сайта, поэтому по дизайну оно не должно быть сильно выделяющимся, но удобным для восприятия пользователя.
Настройка производится по аналогии с универсальным меню.
Сначала выделим пункт в дереве дизайна "Главное меню" и на вкладке "Позиционирование" поставим:
Отступ Сверху - 10
Отступ Снизу - 10
Общая ширина - 100%
Далее выделим "Пункт меню" и зададим настройки
Вкладка "Шрифт":
Цвет: #666666
Размер: 11
Вес шрифта: normal
Начертание: Arial
Подчеркивание: none
Вкладка "Фон":
Уберем заданный изначально цвет
Вкладка "Позиционирование":
Оставим первоначальные значения
Отступ снизу - 2
Общая ширина - 100%
Выравнивание - left
Выделим пункт "Текст", и зададим ему отступы на вкладке "Позиционирование", слева и справа (5), тип контейнера поставим - block.
Тоже самое проделаем с пунктом "Текст" в Активном пункте меню.
Настроим пункт "Разделитель"
На вкладке шрифт зададим след. Настройки:
Цвет: #666666
Размер: 11
Начертание: Arial
Пункт меню при наведении:
Поставим на вкладке "Шрифт" значение "Underline" напротив пункта "Подчеркивание".
На вкладке "Фон" уберем цвет.
Должен получиться следующий вариант (рис. 42)
Рис. 42
СМОТРЕТЬ следующий урок
Вверх
Настройка производится по аналогии с универсальным меню.
Сначала выделим пункт в дереве дизайна "Главное меню" и на вкладке "Позиционирование" поставим:
Отступ Сверху - 10
Отступ Снизу - 10
Общая ширина - 100%
Далее выделим "Пункт меню" и зададим настройки
Вкладка "Шрифт":
Цвет: #666666
Размер: 11
Вес шрифта: normal
Начертание: Arial
Подчеркивание: none
Вкладка "Фон":
Уберем заданный изначально цвет
Вкладка "Позиционирование":
Оставим первоначальные значения
Отступ снизу - 2
Общая ширина - 100%
Выравнивание - left
Выделим пункт "Текст", и зададим ему отступы на вкладке "Позиционирование", слева и справа (5), тип контейнера поставим - block.
Тоже самое проделаем с пунктом "Текст" в Активном пункте меню.
Настроим пункт "Разделитель"
На вкладке шрифт зададим след. Настройки:
Цвет: #666666
Размер: 11
Начертание: Arial
Пункт меню при наведении:
Поставим на вкладке "Шрифт" значение "Underline" напротив пункта "Подчеркивание".
На вкладке "Фон" уберем цвет.
Должен получиться следующий вариант (рис. 42)
Рис. 42
СМОТРЕТЬ следующий урок