Как да добавите падащо поле в Dreamweaver (със снимки)

Съдържание:

Как да добавите падащо поле в Dreamweaver (със снимки)
Как да добавите падащо поле в Dreamweaver (със снимки)

Видео: Как да добавите падащо поле в Dreamweaver (със снимки)

Видео: Как да добавите падащо поле в Dreamweaver (със снимки)
Видео: 3 основных способа получить мгновенный трафик в 2021 год... 2024, Март
Anonim

Това wikiHow ви учи как да използвате Adobe Dreamweaver за създаване на падащо поле за уеб страница. Отпадащите кутии са менюта, които „отпадат“, когато се кликне върху елемент от уеб страницата ви, представяйки повече опции в процеса.

Стъпки

Добавете падащо поле в Dreamweaver Стъпка 1
Добавете падащо поле в Dreamweaver Стъпка 1

Стъпка 1. Отворете проект на Dreamweaver

Щракнете двукратно върху файла на проекта, за да го направите. Ако искате да създадете нов проект на Dreamweaver, вместо това ще отворите Dreamweaver, щракнете върху Файл, щракнете Ново и следвайте всички подкани на екрана.

Добавете падащо поле в Dreamweaver Стъпка 2
Добавете падащо поле в Dreamweaver Стъпка 2

Стъпка 2. Създайте подреден списък

За да създадете падащо меню, трябва да имате поне един елемент от точка. Можете да създадете точка за маркиране, като изключите CSS (щракнете върху Изглед елемент от менюто, изберете Изобразяване на стил и щракнете Стилове на показване ако е отметнато), щракнете върху местоположението, където искате да добавите точката, щракнете върху иконата на куршум в долната част на прозореца и въведете името на точката. След това трябва да включите отново CSS, преди да продължите.

  • Името на точката тук ще служи като активатор на падащото ви меню (напр. Бутонът, върху който човек се движи или докосва, за да отворите падащото меню).
  • Пропуснете тази стъпка, ако вече имате елемент от списък, който искате да преобразувате в падащо меню.
Добавете падащо поле в Dreamweaver Стъпка 3
Добавете падащо поле в Dreamweaver Стъпка 3

Стъпка 3. Определете името на вашия списък

Щракнете върху Код и се уверете, че сте на Програмен код настройка, след това превъртете надолу до кода на вашия подреден списък (той ще бъде между „

"маркер и"

"tag) и потърсете маркера" "отгоре"

. Думата в кавички е името на вашия списък.

  • Ако не виждате име, вмъкнете маркера (където името се отнася до предпочитаното от вас име в списъка) директно над

    етикет.

Добавете падащо поле в Dreamweaver Стъпка 4
Добавете падащо поле в Dreamweaver Стъпка 4

Стъпка 4. Премахнете маркера (ите)

Уверете се, че сте на правилното място, като щракнете върху Дизайн раздела и след това щракнете върху CSS дизайнер раздела в горния десен ъгъл на прозореца, след което направете следното:

  • Щракнете + вдясно от заглавието „Селектори“.
  • Въведете #name ul, където "name" е името на вашия списък.
  • Натиснете ↵ Enter два пъти.
  • Превъртете надолу и щракнете списък-стил-тип в прозореца в долната част на CSS дизайнер раздел.
  • Щракнете нито един в полученото изскачащо меню.
Добавете падащо поле в Dreamweaver Стъпка 5
Добавете падащо поле в Dreamweaver Стъпка 5

Стъпка 5. Променете подредения си списък да се показва хоризонтално

За да направите това:

  • Щракнете + вдясно от заглавието „Селектори“.
  • Въведете #name li, където "name" е името на вашия списък.
  • Намерете заглавието „float“в панела в долната част на CSS дизайнер раздел.
  • Щракнете върху Наляво бутон веднага вдясно от заглавието „float“.
Добавете падащо поле в Dreamweaver Стъпка 6
Добавете падащо поле в Dreamweaver Стъпка 6

Стъпка 6. Добавете активен маркер за вашия списък

Щракнете върху + бутон вдясно от „Селектори“, след това въведете #име a (където „име“е името на вашия списък) и натиснете ↵ Enter два пъти.

Добавете падащо поле в Dreamweaver Стъпка 7
Добавете падащо поле в Dreamweaver Стъпка 7

Стъпка 7. Добавете цвят на фона

Изберете #име а елемент, ако е необходимо, след това щракнете върху раздела „Цвят на фона“във формата на кутия в горната част на CSS дизайнер прозорец, изберете Цвят на фона опция и изберете цвят на фона, който да използвате.

Това е цветът, който ще използват елементите на падащия ви списък

Добавете падащо поле в Dreamweaver Стъпка 8
Добавете падащо поле в Dreamweaver Стъпка 8

Стъпка 8. Направете елементите си в списъка да използват формата „блок“

Този формат гарантира, че когато някой кликне или докосне елемент от списъка, той може да го отвори, като избере малко над или под него, вместо да се налага да избира точно текста:

  • Уверете се, че вашият #име а елемент е избран в CSS дизайнер раздел.
  • Превъртете надолу до заглавието „дисплей“в панела.
  • Щракнете върху най-дясната страна на заглавието „дисплей“, след което щракнете върху блок в полученото меню.
Добавете падащо поле в Dreamweaver Стъпка 9
Добавете падащо поле в Dreamweaver Стъпка 9

Стъпка 9. Добавете подложка, ако е необходимо

Ако забележите, че елементите на вашия списък са заседнали един срещу друг, можете да поставите малко пространство между тях, като направите следното:

  • Уверете се, че вашият #име а елемент е избран в CSS дизайнер раздел.
  • Превъртете надолу до заглавието „padding“в панела.
  • Променете горното и долното текстово поле „px“, за да четете поне 5.
  • Променете лявото и дясното текстово поле "px", за да четете поне 10.
Добавете падащо поле в Dreamweaver Стъпка 10
Добавете падащо поле в Dreamweaver Стъпка 10

Стъпка 10. Създайте цвят при зависване

Това е цветът, който ще се появи, когато задържите курсора на мишката върху елемент от падащото меню:

  • Щракнете + вдясно от заглавието „Селектори“.
  • Въведете #nave a: hover (където "name" е името на вашия списък) и натиснете ↵ Enter два пъти.
  • Щракнете върху раздела „Цвят на фона“.
  • Изберете Цвят на фона и след това изберете по -светъл цвят, отколкото сте използвали за цвета на фона.
Добавете падащо поле в Dreamweaver Стъпка 11
Добавете падащо поле в Dreamweaver Стъпка 11

Стъпка 11. Изключете CSS

Щракнете върху Изглед елемент от менюто, изберете Изобразяване на стил и щракнете върху Стилове на показване опция в изскачащия прозорец.

Ако Стилове на показване опцията е затъмнена, щракнете навсякъде във вашия Dreamweaver документ и опитайте отново.

Добавете падащо поле в Dreamweaver Стъпка 12
Добавете падащо поле в Dreamweaver Стъпка 12

Стъпка 12. Създайте съдържанието на падащото меню

Можете да направите това, като добавите подточки под маркера, които искате да използвате като бутон на падащото меню:

  • Щракнете вдясно от елемента от списъка, който искате да превърнете в падащо меню, след което натиснете ↵ Enter.
  • Натиснете Tab ↹.
  • Въведете името на първия си елемент от падащото меню, след което натиснете ↵ Enter.
  • Въведете името на следващото падащо меню, след което натиснете ↵ Enter и повторете, ако е необходимо.
Добавете падащо поле в Dreamweaver Стъпка 13
Добавете падащо поле в Dreamweaver Стъпка 13

Стъпка 13. Обвържете съдържанието на падащото меню с елемент от куршума

За да направите това:

  • Щракнете + до „Селектори“, след това въведете #name ul ul и натиснете ↵ Enter два пъти.
  • Превъртете надолу и щракнете дисплей, след което щракнете нито един в изскачащото меню.
  • Намерете и щракнете позиция, след което щракнете абсолютен в изскачащото меню.
Добавете падащо поле в Dreamweaver Стъпка 14
Добавете падащо поле в Dreamweaver Стъпка 14

Стъпка 14. Създайте самото падащо меню

Ще трябва да добавите още един селектор, за да направите това:

  • Щракнете + до „Селектори“, след това въведете #име ul li: hover> ul и натиснете ↵ Enter два пъти.
  • Намерете и щракнете дисплей, след което щракнете блок в полученото изскачащо меню.
Добавете падащо поле в Dreamweaver Стъпка 15
Добавете падащо поле в Dreamweaver Стъпка 15

Стъпка 15. Направете съдържанието на падащото меню вертикално

По подразбиране съдържанието на падащото меню ще се показва в хоризонтална лента, но можете да ги принудите във вертикална колона, като направите следното:

  • Щракнете + до „Селектори“, след това въведете #name ul ul li и натиснете ↵ Enter два пъти.
  • Намерете заглавието „плаващ“.
  • Щракнете върху „няма“() опция вдясно от заглавието "float".
Добавете падащо поле в Dreamweaver Стъпка 16
Добавете падащо поле в Dreamweaver Стъпка 16

Стъпка 16. Запазете вашия проект

Натиснете Ctrl+S (Windows) или ⌘ Command+S (Mac), за да направите това.

Ако сте създали нов файл Dreamweaver за този проект, ще трябва да въведете име, да изберете място за запазване и да щракнете Запазване за да запазите файла си.

Препоръчано: