Из этой статьи вы узнаете, как использовать Adobe Dreamweaver для создания раскрывающегося списка для веб-страницы. Выпадающие списки - это меню, которые «раскрываются» при щелчке по элементу на вашей веб-странице, предоставляя дополнительные параметры в процессе.
Шаги
Шаг 1. Откройте проект Dreamweaver
Для этого дважды щелкните файл проекта. Если вы хотите создать новый проект Dreamweaver, вместо этого откройте Dreamweaver, щелкните Файл нажмите Новый и следуйте инструкциям на экране.
Шаг 2. Создайте упорядоченный список
Чтобы создать раскрывающееся меню, у вас должен быть хотя бы один пункт маркированного списка. Вы можете создать маркер, отключив CSS (щелкните значок Вид пункт меню выберите Визуализация стиля и щелкните Стили отображения если он отмечен), щелкнув место, куда вы хотите добавить точку, щелкнув значок маркированной точки в нижней части окна и введите имя точки. Затем вам следует снова включить CSS, прежде чем продолжить.
- Имя точки здесь будет служить активатором вашего раскрывающегося меню (например, кнопка, над которой можно навести курсор или нажать, чтобы открыть раскрывающееся меню).
- Пропустите этот шаг, если у вас уже есть элемент списка, который вы хотите преобразовать в раскрывающееся меню.
Шаг 3. Определите название вашего списка
Щелкните значок Код вкладка и убедитесь, что вы находитесь на Исходный код настройки, затем прокрутите вниз до кода вашего упорядоченного списка (он будет между"
"тег и"
"тег") и найдите "" тег вверху"
тег. Слово в кавычках - это название вашего списка.
-
Если вы не видите имени, вставьте тег (где имя относится к вашему предпочтительному имени в списке) непосредственно над
ярлык.
Шаг 4. Удалите маркированные точки
Убедитесь, что вы находитесь в нужном месте, нажав на Дизайн вкладка, а затем щелкнув CSS дизайнер вкладку в правом верхнем углу окна, а затем выполните следующие действия:
- Нажмите + справа от заголовка «Селекторы».
- Введите #name ul, где "name" - название вашего списка.
- Дважды нажмите ↵ Enter.
- Прокрутите вниз и нажмите список-стиль-тип на панели внизу CSS дизайнер таб.
- Нажмите никто в появившемся всплывающем меню.
Шаг 5. Измените упорядоченный список, чтобы он отображался по горизонтали
Для этого:
- Нажмите + справа от заголовка «Селекторы».
- Введите #name li, где «name» - это название вашего списка.
- Найдите заголовок "плавающий" на панели в нижней части CSS дизайнер таб.
- Щелкните значок Левый сразу справа от заголовка "плавающий".
Шаг 6. Добавьте активный тег для вашего списка
Щелкните значок + справа от «Селекторы», затем введите #name a (где «name» - это имя вашего списка) и дважды нажмите ↵ Enter.
Шаг 7. Добавьте цвет фона
Выберите #name a при необходимости, затем нажмите на прямоугольную вкладку "Цвет фона" в верхней части CSS дизайнер панели выберите фоновый цвет вариант и выберите цвет фона для использования.
Это цвет, который будут использовать элементы вашего раскрывающегося списка
Шаг 8. Сделайте так, чтобы элементы вашего списка использовали «блочный» формат
Этот формат гарантирует, что когда кто-то собирается щелкнуть или коснуться элемента в списке, он сможет открыть его, выбрав немного выше или ниже, вместо того, чтобы выбирать именно текст:
- Убедитесь, что ваш #name a элемент выбран в CSS дизайнер таб.
- Прокрутите вниз до заголовка «отображение» на панели.
- Щелкните крайнюю правую часть заголовка «отображение», затем щелкните блокировать в появившемся меню.
Шаг 9. При необходимости добавьте отступ
Если вы заметили, что элементы вашего списка прижаты друг к другу, вы можете разместить между ними некоторое пространство, выполнив следующие действия:
- Убедитесь, что ваш #name a элемент выбран в CSS дизайнер таб.
- Прокрутите вниз до заголовка «заполнение» на панели.
- Измените верхнее и нижнее текстовые поля «px», чтобы читать не менее 5.
- Измените левое и правое текстовые поля «px», чтобы читать было не менее 10.
Шаг 10. Создайте цвет при наведении
Это цвет, который будет отображаться при наведении курсора мыши на элемент в раскрывающемся меню:
- Нажмите + справа от заголовка «Селекторы».
- Введите #nave a: hover (где «name» - это имя вашего списка) и дважды нажмите ↵ Enter.
- Щелкните вкладку «Цвет фона».
- Выбирать фоновый цвет а затем выберите более светлый цвет, чем вы использовали для цвета фона.
Шаг 11. Отключите CSS
Щелкните значок Вид пункт меню выберите Визуализация стиля, и щелкните Стили отображения вариант во всплывающем окне.
Если Стили отображения выделен серым цветом, щелкните в любом месте документа Dreamweaver и повторите попытку.
Шаг 12. Создайте содержимое выпадающего меню
Вы можете сделать это, добавив под маркером подпункты, которые вы хотите использовать в качестве кнопки раскрывающегося меню:
- Щелкните справа от элемента списка, который нужно превратить в раскрывающееся меню, затем нажмите ↵ Enter.
- Нажмите Tab ↹.
- Введите имя первого пункта раскрывающегося меню и нажмите ↵ Enter.
- Введите название следующего раскрывающегося меню, затем нажмите ↵ Enter и повторите, если необходимо.
Шаг 13. Свяжите содержимое раскрывающегося меню с маркером
Для этого:
- Нажмите + рядом с «Селекторами», затем введите #name ul ul и дважды нажмите ↵ Enter.
- Прокрутите вниз и нажмите отображать, затем щелкните никто во всплывающем меню.
- Найдите и щелкните позиция, затем щелкните абсолютный во всплывающем меню.
Шаг 14. Создайте само выпадающее меню
Для этого вам нужно будет добавить еще один селектор:
- Нажмите + рядом с «Селекторами» введите #name ul li: hover> ul и дважды нажмите ↵ Enter.
- Найдите и щелкните отображать, затем щелкните блокировать в появившемся всплывающем меню.
Шаг 15. Сделайте так, чтобы содержимое выпадающего меню отображалось вертикально
По умолчанию содержимое раскрывающегося меню отображается в виде горизонтальной полосы, но вы можете превратить их в вертикальный столбец, выполнив следующие действия:
- Нажмите + рядом с «Селекторами» введите #name ul ul li и дважды нажмите ↵ Enter.
- Найдите заголовок "поплавок".
- Нажмите "нет" () справа от заголовка "float".
Шаг 16. Сохраните ваш проект
Для этого нажмите Ctrl + S (Windows) или ⌘ Command + S (Mac).
