Как создать выпадающее меню в Dreamweaver

Dreamweaver позволяет легко создавать выпадающие меню для вашего веб-сайта. Но, как и все формы HTML, они могут быть немного хитрыми. Из этого туториала вы узнаете, как создать раскрывающееся меню в Dreamweaver.

Dreamweaver Jump Menus

Dreamweaver 8 также предоставляет мастер для создания меню перехода для навигации по вашему веб-сайту. В отличие от основных выпадающих меню, это меню на самом деле что-то сделает, когда вы закончите. Вам не нужно будет писать какие-либо JavaScript или CGI, чтобы ваша раскрывающаяся форма работала. В этом руководстве также объясняется, как использовать мастер Dreamweaver 8 для создания меню перехода.

Сначала создайте форму

Важное примечание о формах HTML и Dreamweaver:

За исключением специальных мастеров, таких как меню переходов, Dreamweaver не помогает вам «работать» с HTML-формами. Для этого вам нужен CGI или JavaScript. Пожалуйста, ознакомьтесь с моим руководством по созданию HTML-форм для получения дополнительной информации.

Когда вы добавляете раскрывающееся меню на свой веб-сайт, первое, что вам нужно, это форма, которая его окружает. В Dreamweaver перейдите в меню «Вставка» и нажмите «Форма», затем выберите «Форма».

Отображение форм в режиме конструктора

Dreamweaver визуально отображает местоположение вашей формы в режиме конструктора, чтобы вы знали, где разместить элементы формы. Это важно, потому что теги выпадающего меню недопустимы (и не будут работать) вне элемента формы. Как вы можете видеть на изображении, форма представляет собой красную пунктирную линию в режиме конструктора.

Выберите Список/Меню

Раскрывающиеся меню в Dreamweaver называются пунктами «список» или «меню». Таким образом, чтобы добавить один к вашей форме, вам нужно перейти в меню «Форма» в меню «Вставка» и выбрать «Список/Меню». Убедитесь, что курсор находится внутри красной пунктирной линии вашего поля формы.

Окно специальных опций

В настройках Dreamweaver есть экран «Доступность». Я хочу, чтобы Dreamweaver показал мне все атрибуты доступности. И этот экран является результатом этого. Формы – это место, где доступность многих веб-сайтов падает, и, заполнив эти пять опций, ваши выпадающие меню сразу станут более доступными.

Доступность формы

Варианты доступности:

этикетка

Это имя для поля. Он будет отображаться в виде текста рядом с элементом формы.
Напишите, как вы хотите назвать раскрывающееся меню. Это может быть вопрос или короткая фраза, на которую ответит выпадающее меню.

Стиль

HTML включает метку метки, чтобы идентифицировать ваши метки формы в браузере. Вы можете обернуть раскрывающееся меню и текст метки тегом, использовать атрибут «for» на метке метки, чтобы определить, на какой тег формы он ссылается, или вообще не использовать метку метки.
Я предпочитаю использовать атрибут for, так как тогда, если мне нужно по какой-то причине переместить метку, она все равно будет прикреплена к правильному полю формы.

Позиция

Вы можете разместить свой ярлык до или после раскрывающегося меню.

Ключ доступа

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

Индекс вкладки

Это порядок доступа к полю формы при использовании клавиатуры для перехода по веб-странице.

Когда вы обновите параметры доступности, нажмите «ОК».

Выберите меню

Когда у вас появится раскрывающееся меню в режиме конструктора Dreamweaver, вам необходимо добавить в него различные элементы. Сначала выберите выпадающее меню, нажав на него. Dreamweaver поместит еще одну пунктирную линию вокруг выпадающего меню, чтобы показать, что вы выбрали его.

Свойства меню

Меню свойств изменится на список/свойства меню для этого выпадающего меню. Там вы можете дать своему меню идентификатор (где оно говорит «выбрать»), решить, хотите ли вы, чтобы оно было списком или меню, присвоить ему класс стилей из вашей таблицы стилей и назначить значения для раскрывающегося списка.

В чем разница между списком и меню?

Dreamweaver вызывает раскрывающееся меню любого раскрывающегося меню, в котором допускается только один выбор. «Список» позволяет выбрать несколько вариантов в раскрывающемся списке и может иметь более одного элемента.

Если вы хотите, чтобы раскрывающееся меню занимало несколько строк, измените его на тип «список» и оставьте флажок «выбор» не отмеченным.

Добавить новые элементы списка

Чтобы добавить новые элементы в ваше меню, нажмите кнопку «Список значений …». Это откроет окно выше. Введите ярлык вашего товара в первом поле. Это то, что будет отображаться на странице.Если вы оставите значение пустым, это также то, что будет отправлено в форме.

Добавить еще и изменить порядок

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

Дайте все значения предметов

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

Выберите по умолчанию

По умолчанию на веб-страницах отображается раскрывающийся элемент, который указан первым в качестве элемента по умолчанию. Но если вы хотите выбрать другой, выделите его в поле «Первоначально выбранный» в меню «Свойства».

Посмотреть свой список в режиме конструктора

После завершения редактирования свойств Dreamweaver отобразит раскрывающийся список с выбранным значением по умолчанию.

Смотрите свой список в представлении кода

Если вы переключитесь в режим просмотра кода, вы увидите, что Dreamweaver добавляет выпадающее меню с очень чистым кодом. Единственными дополнительными атрибутами являются те, которые мы добавили с опциями доступности. Код весь с отступом и очень легко читается и понимается. Он даже добавляет атрибут selected = “selected”, потому что я сказал Dreamweaver, что по умолчанию я пишу XHTML.

Сохранить и просмотреть в браузере

Если вы сохраните документ и просмотрите его в веб-браузере, вы увидите, что раскрывающееся меню выглядит так, как вы ожидаете.

Но это ничего не делает …

Меню, которое мы создали выше, выглядит хорошо, но ничего не делает. Чтобы заставить его что-то делать, вам нужно настроить действие формы на самой форме.

К счастью, Dreamweaver имеет встроенную форму выпадающего меню, которую вы можете сразу использовать на своем сайте, не изучая формы, CGI или скрипты. Это называется Jump Menu.

Меню перехода Dreamweaver устанавливает раскрывающееся меню с именами и URL-адресами. Затем вы можете выбрать пункт в меню, и веб-страница переместится в это место, как если бы вы щелкнули ссылку.

Перейдите в меню «Вставка» и выберите «Форма», а затем «Меню перехода».

Окно меню Jump

В отличие от стандартного выпадающего меню, меню «Прыжок» открывает новое окно, в котором вы можете указать названия пунктов меню и добавить сведения о том, как должна работать форма.

Для первого элемента измените текст «untitled1» на то, что вы хотите, чтобы он читал, и добавьте URL, на который должна перейти эта ссылка.

Добавить элементы в меню прыжков

Нажмите на добавить элемент, чтобы добавить новый элемент в меню переходов. Добавьте столько предметов, сколько пожелаете.

Опции меню Jump

После того, как вы добавили все ссылки, которые вы хотите, вы должны выбрать свои варианты:

Открытые URL в

Если у вас есть набор фреймов, вы можете открыть ссылки в другом фрейме. Или вы можете изменить опцию Главного окна на специальную цель, чтобы URL открывался в новом окне или в другом месте.

Название меню

Дайте вашему меню уникальный идентификатор для страницы. Это необходимо для правильной работы скрипта. Это также позволяет вам иметь несколько меню перехода в одной форме – просто дайте им все разные имена.

Вставить кнопку Go после меню

Мне нравится выбирать это, потому что иногда скрипт не работает при изменении меню. Это также более доступно.

Выберите первый элемент после изменения URL

Выберите это, если у вас есть приглашение, например «Выбрать один», в качестве первого пункта меню. Это обеспечит сохранение этого элемента на странице по умолчанию.

Перейти Дизайн меню

Как и в первом меню, Dreamweaver настраивает ваше меню переходов в режиме конструктора с видимым элементом по умолчанию. Затем вы можете редактировать раскрывающееся меню, как и любое другое.

Если вы его редактируете, убедитесь, что не изменили идентификаторы элементов, иначе скрипт может не работать.

Перейти меню в браузере

Сохранение файла и нажатие клавиши F12 отобразит страницу в выбранном вами браузере. Там вы можете выбрать опцию, нажать «Перейти» и меню прыжков работает!