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