Что нужно знать
- Перейдите к Вставка > Форма > Форма. Нажмите красную пунктирную линию на форме и перейдите к Вставка > Форма > Список/Меню. Выберите параметры доступности.
- Нажмите на меню и выберите его свойства, затем выберите Список значений, чтобы добавить новые пункты меню. Нажмите знак плюса, чтобы добавить больше элементов.
- Добавьте значения элемента и выберите элемент по умолчанию. Чтобы добавить действия, перейдите Insert > Form > Jump Menu. Добавьте элементы в меню перехода и сохраните.
Dreamweaver позволяет легко создавать раскрывающиеся меню для вашего веб-сайта. Но, как и все HTML-формы, они могут быть немного сложными. Из этого руководства вы узнаете, как создать раскрывающееся меню в Dreamweaver.
Меню перехода Dreamweaver
Dreamweaver 8 также предоставляет мастер для создания меню перехода для навигации по вашему веб-сайту. В отличие от обычных раскрывающихся меню, это меню будет что-то делать, когда вы закончите. Вам не нужно будет писать JavaScript или CGI, чтобы ваша выпадающая форма работала. В этом руководстве также объясняется, как использовать мастер Dreamweaver 8 для создания меню перехода.
Сначала создайте форму
За исключением специальных мастеров, таких как меню переходов, Dreamweaver не помогает заставить HTML-формы «работать». Для этого вам понадобится CGI или JavaScript.
Когда вы добавляете выпадающее меню на свой веб-сайт, первое, что вам нужно, это форма, которая его окружает. В Dreamweaver перейдите в меню «Вставка» и нажмите «Форма», затем выберите «Форма».
Отображение формы в представлении «Дизайн»
Dreamweaver визуально показывает расположение формы в представлении «Дизайн», чтобы вы знали, куда поместить элементы формы, поскольку теги раскрывающегося меню недействительны (и не будут работать) за пределами элемента формы. Как вы можете видеть на изображении, форма - это красная пунктирная линия в представлении дизайна.
Выбрать Список/Меню
Раскрывающиеся меню в Dreamweaver называются элементами списка или меню. Поэтому, чтобы добавить его в свою форму, вам нужно зайти в меню «Форма» в меню «Вставка» и выбрать «Список/Меню». Убедитесь, что курсор находится в пределах красной пунктирной линии поля формы.
Окно специальных параметров
В настройках Dreamweaver есть экран специальных возможностей. Ваши выпадающие меню сразу же станут более доступными, чем на других веб-сайтах, если вы заполните эти пять вариантов.
Доступность формы
Доступные варианты:
Ярлык
Поле метки отображается в виде текста рядом с элементом формы. Введите имя для раскрывающегося меню. Это может быть вопрос или короткая фраза, на которую ответит выпадающее меню.
Стиль
HTML включает тег label для идентификации ваших ярлыков форм в веб-браузере. У вас есть выбор: обернуть раскрывающееся меню и текст метки тегом, использовать атрибут «for» в теге метки, чтобы определить, на какой тег формы он ссылается, или вообще не использовать тег метки.
Позиция
Вы можете разместить свою метку до или после раскрывающегося меню.
Ключ доступа
Посетители могут использовать ключ доступа с«Изображение» или клавиши Option, чтобы перейти непосредственно к этому полю формы. Это сочетание клавиш упрощает работу с формами без мыши. alt="
Указатель вкладок
Указатель вкладок - это то, как пользователи должны получать доступ к полям формы при использовании клавиатуры для перехода по веб-странице.
После того как вы обновите параметры специальных возможностей, нажмите OK.
Выберите меню
После того как раскрывающееся меню отобразится в представлении «Дизайн» Dreamweaver, необходимо добавить различные элементы. Сначала выберите раскрывающееся меню, щелкнув по нему. Dreamweaver поместит еще одну пунктирную линию вокруг раскрывающегося меню, чтобы показать, что вы его выбрали.
Свойства меню
Меню свойств изменится на свойства списка/меню для этого раскрывающегося меню. Там вы можете присвоить своему меню идентификатор (где написано «выбрать»), решить, хотите ли вы, чтобы это был список или меню, присвоить ему класс стиля из таблицы стилей и назначить значения в раскрывающемся списке.
В чем разница между списком и меню?
Dreamweaver называет раскрывающимся меню любое раскрывающееся меню, допускающее только один выбор. «Список» позволяет выбрать несколько вариантов в раскрывающемся списке и может содержать более одного элемента.
Если вы хотите, чтобы выпадающее меню было на несколько строк выше, измените его на тип «список» и оставьте поле «выборки» не отмеченным.
Добавить новые элементы списка
Чтобы добавить новые пункты в ваше меню, нажмите на кнопку «Список значений…», которая открывает вышеуказанное окно. Затем введите метку элемента в первое поле. Он будет отображаться на странице.
Добавить еще и изменить порядок
Нажмите на значок плюса, чтобы добавить больше элементов. Если вы хотите изменить их порядок в списке, используйте стрелки вверх и вниз справа.
Присвоить значение всем элементам
Если оставить значение пустым, метка перейдет в форму. Но вы можете указать значения всех ваших элементов, чтобы отправить альтернативную информацию в вашу форму. Вы будете часто использовать это для таких вещей, как меню перехода и гиперссылки.
Выберите значение по умолчанию
Веб-страницы по умолчанию отображают любой элемент раскрывающегося списка, указанный первым в качестве элемента по умолчанию. Но если вы хотите выбрать другой, выделите его в поле «Выбрано изначально» в меню «Свойства».
Просмотр списка в представлении «Дизайн»
После того как вы закончите редактирование свойств, Dreamweaver покажет раскрывающийся список с выбранным значением по умолчанию.
Просмотр списка в представлении кода
Если вы переключитесь в режим просмотра кода, вы увидите, что Dreamweaver добавляет раскрывающееся меню с чистым кодом. Единственными дополнительными атрибутами являются параметры доступности. Весь код с отступом, его очень легко читать и понимать.
Сохранить и просмотреть в браузере
Если вы сохраните документ и просмотрите его в веб-браузере, вы увидите, что раскрывающееся меню выглядит именно так, как вы и ожидали.
Но это ничего не делает…
Созданное выше меню выглядит нормально, но ничего не делает. Чтобы заставить его что-то делать, вам нужно настроить действие формы на самой форме.
К счастью, в Dreamweaver есть встроенная форма раскрывающегося меню, которую вы можете сразу же использовать на своем сайте без необходимости изучать формы, CGI или сценарии. Это называется меню перехода.
Меню перехода Dreamweaver представляет собой раскрывающееся меню с именами и URL-адресами. Затем вы можете выбрать элемент в меню, и веб-страница переместится в это место, как если бы вы щелкнули ссылку.
Перейдите в меню «Вставка» и выберите «Форма», а затем «Меню перехода».
Окно меню перехода
В отличие от стандартного раскрывающегося меню, меню перехода открывает новое окно, в котором вы можете назвать элементы меню и добавить сведения о том, как должна работать форма.
Для первого элемента измените текст "un titled1" на то, что вы хотите прочитать, и добавьте URL.
Добавить элементы в меню перехода
Нажмите на элемент добавления, чтобы добавить новый элемент в меню переходов. Добавьте столько элементов, сколько хотите.
Параметры меню перехода
После того, как вы добавили все нужные ссылки, вы должны выбрать нужные параметры:
Открыть URL-адреса In
Если у вас есть набор фреймов, вы можете открывать ссылки в другом фрейме. Или вы можете изменить параметр главного окна на специальную цель, чтобы URL-адрес открывался в новом окне или в другом месте.
Название меню
Дайте вашему меню уникальный идентификатор страницы. Это необходимо для корректной работы скрипта. Это также позволяет вам иметь несколько меню перехода в одной форме - дать им всем разные имена.
Вставить кнопку «Перейти» после меню
Мне нравится выбирать это, потому что иногда скрипт не работает при изменении меню. Это также более доступно.
Выбрать первый элемент после изменения URL
Выберите это, если у вас есть подсказка, например, «Выбрать один» в качестве первого пункта меню. Это гарантирует, что этот элемент останется на странице по умолчанию.
Просмотр дизайна меню перехода
Как и в случае с вашим первым меню, Dreamweaver настраивает меню перехода в представлении «Дизайн» с видимым элементом по умолчанию. Затем вы можете редактировать раскрывающееся меню, как и любое другое.
Если вы редактируете его, убедитесь, что не изменились идентификаторы элементов; иначе скрипт может не работать.
Меню перехода в браузере
Сохранение файла и нажатие F12 отобразит страницу в предпочитаемом вами браузере. Там вы можете выбрать вариант, нажать «Перейти», и меню перехода заработает.
