Совет 1: Как сделать горизонтальное меню

Создание меню, наверное, одним из главных пунктов в разработке сайтов и программ. К тому же хорошая проработка и логическая конструкция такого меню является лицом сайта или любой программы. Для примера приведем, компанию Microsoft и операционную систему Windows 7. После выхода в свет Windows 7, компания Microsoft услышала много не лестной для себя критики в свой адрес. Критиковали много всего, но чаще всего неудобно расположенные пункты меню.Внимательно прочтите данную инструкцию по созданию горизонтального выпадающего меню при помощи CSS и Expression Web. Для создания меню будут меняться стили тегов
  • .
  • Инструкция
    1
    Перейдите в Manage Styles и затем нужно нажать кнопку New Style. Присвойте имя Selector ul li, только что созданному новому стилю. Также не забудьте удостовериться, новый стиль должен быть определен в файле drop-down.css.
    2
    Для растяжения горизонтального меню необходимо указать элементам меню, что оно будет горизонтальным. Далее необходимо определить ширину каждого пункта меню и убрать все лишние точки перед всеми элементами списка.
    3
    Для горизонтального выравнивания перейдите в Layout и установите атрибут display в значение inline. Атрибут float установите в значение left. Нажмите кнопку Apply. Все элементы списка должны быть установлены в одну строчку. Для того чтобы они не налезали друг на друга нужно выполнить следующие действия: установить значение Position атрибута width в значение 150px. Теперь проверьте. Все элементы списка должны стать одинакового размера.
    4
    Теперь нужно постараться убрать точки перед элементами списка. Для этого перейдите в List и для атрибута list-style –type установите значение none.
    5
    Нажмите ОК чтобы принять все изменения.
    6
    Чтобы настроить размер шрифта для стиля ul li, необходимо выполнить следующее. В Manage Styles нажмите правой кнопкой мыши на стиле ul li вам нужно выбрать Modify Style. Откроется знакомое диалоговое окно для добавления или изменения атрибутов. Перейдите в категорию Font и для атрибута font-family установите значение Arial, Helvetica, sans-serif. Далее переходим в атрибут font-size и устанавливаем для него значение 0.9em. После этого настраиваем атрибут text-transform, для него установим значение uppercase.
    7
    Высоту пунктов в созданном меню можно настроить в категории Position. Установить атрибут height в значение 30px.
    8
    Далее необходимо сохранить файл menu.html. Для этого Expression Web откроет необходимое окно Save Embedded Files, для сохранения файла. Сохраните в файле drop- down.css. Нажмите ОК для сохранения.
    9
    Теперь проверьте полученный результат. Для надежности лучше его протестировать в различных браузерах. Чтобы проверить полученный результат в браузере по умолчанию, необходимо нажать клавишу F12 на клавиатуре.

    Совет 2: Как сделать выпадающее горизонтальное меню

    Один из наиболее важных аспектов в разработке программ и сайтов – это создание меню. В качестве яркого примера стоит взять компанию Microsoft и ее самое известное детище – операционную систему Windows. Несмотря на то, что данным продуктом пользуется подавляющее большинство пользователей ПК в мире, критика не только не уменьшается, но и постоянно растет. В основном она касается неудобства расположения пунктов меню. Далее следует описание создания меню в CSS и Expression Web.
    Инструкция
    1
    Чтобы начать создание горизонтального меню, перейдите в Manage Style, далее нажмите кнопку New Style. Присвойте новому стилю название Selector ul li. Важно! Удостоверьтесь, что созданный файл имеет расширение drop-down.css. Чтобы сделать горизонтальное меню, укажите созданному элементу, что он будет именно горизонтальным. Далее определите ширину каждого пункта меню и уберите все лишние точки, расставленные перед всеми пунктами списка.
    2
    Перейдите в опцию Layout, установите атрибут Display, придав ему значение Inline, чтобы сделать горизонтальное выравнивание. Далее придайте значение Left атрибуту Float и нажмите кнопку «Применить» - Apply. Установите все элементы списка в одну строку. Чтобы они расставились аккуратно и не заползали друг на друга, в атрибуте Width установите значение Position равным 150 рх. Проверьте, чтобы все элементы списка стали одинаковыми по размеру. Далее уберите точки перед всеми элементами - для этого перейдите в атрибут List и в пункте List Style-type установите параметр None. Нажмите Ок, чтобы все изменения были приняты и вступили в силу.
    3
    Настройте размер и стиль шрифта для ul li. Для этого перейдите в Manage Styles и кликните правой кнопкой мыши на ul li, после чего выберите Modify Style. Появится уже знакомое диалоговое окно. Перейдите в пункт Font, выберите атрибут Font-family и установите для него значения Sans-serif, Arial, Helvetica. Далее скорректируйте размер шрифта, установив для него значение 0,9. После этого для атрибута Text-transform установите значение Uppercase. Скорректируйте высоту пунктов меню в атрибуте Height - Position, выставив значение 30 рх.
    4
    После завершения всех корректирующих операций сохраните файл как menu.html. Далее протестируйте созданное меню в различных браузерах, чтобы убедиться в корректности его работы. Как видите, конструкция горизонтального меню достаточно проста.
    Видео по теме
    Видео по теме
    Поиск
    Совет полезен?
    Добавить комментарий к статье
    Осталось символов: 500
    к
    Honor 6X Premium
    новая премиальная версия
    узнать больше