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

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

Ключ доступа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Давать все значения элементов

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

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

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

Просмотреть свой список в представлении дизайна

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

Просмотр списка в виде кода

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

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

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

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

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

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

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

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

Окно меню перехода

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

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

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

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

Параметры меню перехода

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

Открыть URL-адреса в

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

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

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

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

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

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

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

Просмотр дизайна меню перехода

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

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

Меню перехода в браузере

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