Бұл wikiHow сізге Adobe Dreamweaver көмегімен веб-беттің ашылмалы терезесін жасауды үйретеді. Ашылмалы терезелер-бұл сіздің веб-беттегі элемент басылған кезде «ашылатын» мәзірлер, бұл процесте қосымша опцияларды ұсынады.
Қадамдар
Қадам 1. Dreamweaver жобасын ашыңыз
Ол үшін жоба файлын екі рет шертіңіз. Егер сіз Dreamweaver жаңа жобасын жасағыңыз келсе, оның орнына Dreamweaver бағдарламасын ашасыз, түймесін басыңыз Файл, басыңыз Жаңа және экрандағы кез келген нұсқауларды орындаңыз.
Қадам 2. Реттелген тізімді жасаңыз
Ашылмалы мәзір құру үшін сізде кем дегенде бір нүкте пункті болуы керек. CSS өшіру арқылы таңбалау нүктесін жасауға болады (Көру мәзір элементін таңдаңыз Стильді бейнелеу, және басыңыз Стильдерді көрсету егер ол тексерілсе), нүктені қосқыңыз келетін орынды нұқыңыз, терезенің төменгі жағындағы таңбалауыш белгішесін нұқыңыз және нүктенің атын теріңіз. Жалғастырмас бұрын CSS -ті қайта қосу керек.
- Мұндағы нүкте атауы ашылмалы мәзірдің активаторы ретінде қызмет етеді (мысалы, ашылмалы мәзірді ашу үшін оның үстіне апаратын немесе басатын түйме).
- Егер сізде ашылмалы мәзірге түрлендіргіңіз келетін тізім элементі болса, бұл қадамды өткізіп жіберіңіз.
3 -қадам. Тізімнің атын анықтаңыз
Түймесін басыңыз Код қойындысын ашып, жүйеде екеніңізге көз жеткізіңіз Бастапқы код орнатыңыз, содан кейін тапсырыс берілген тізім кодымен төмен қарай айналдырыңыз (ол «арасында болады»)
«тег және»
«тег) және жоғарыдан» «тегін іздеңіз
«тег. Дәйексөздегі сөз - сіздің тізіміңіздің аты.
-
Егер сіз атауды көрмесеңіз, тегті енгізіңіз (мұнда атау тізімнің таңдаулы атауына сәйкес келеді)
тег
4 -қадам. Таңбалау нүктесін алып тастаңыз
Түймешікті басу арқылы дұрыс жерде екеніңізге көз жеткізіңіз Дизайн қойындысын, содан кейін түймесін басыңыз CSS дизайнері терезенің жоғарғы оң жақ бұрышындағы қойындысын ашып, келесі әрекеттерді орындаңыз:
- Шертіңіз + «Таңдаушылар» тақырыбының оң жағында.
- #Name ul теріңіз, мұнда «аты» - сіздің тізіміңіздің аты.
- ↵ Enter пернесін екі рет басыңыз.
- Төменге айналдырып, басыңыз тізім стилі түрі астындағы тақтада CSS дизайнері қойынды.
- Шертіңіз жоқ пайда болған қалқымалы мәзірде.
Қадам 5. Тапсырыс берілген тізімді көлденең көрсету үшін өзгертіңіз
Ол үшін:
- Шертіңіз + «Таңдаушылар» тақырыбының оң жағында.
- #Name li теріңіз, мұнда «аты» - сіздің тізіміңіздің аты.
- Төменгі жағындағы тақтадан «қалқымалы» тақырыбын табыңыз CSS дизайнері қойынды.
- Түймесін басыңыз Сол «қалқымалы» тақырыбының оң жағындағы батырманы бірден басыңыз.
Қадам 6. Тізімге белсенді тег қосыңыз
Түймесін басыңыз + «Таңдаушылардың» оң жағындағы түймешікті басып, #name a теріңіз (мұндағы «аты» - сіздің тізіміңіздің аты) және ↵ Enter пернесін екі рет басыңыз.
Қадам 7. Фон түсін қосыңыз
Таңдаңыз #аты а Қажет болса, элементтің жоғарғы жағындағы ұяшық тәрізді «Фон түсі» қойындысын нұқыңыз CSS дизайнері тақтасында таңдаңыз фон түсі опциясын таңдап, пайдаланылатын өң түсін таңдаңыз.
Бұл сіздің ашылмалы тізім элементтері пайдаланатын түс
Қадам 8. Тізім элементтерін «блок» пішімін қолданыңыз
Бұл формат біреу тізімдегі элементті басқанда немесе түрткенде, оны мәтінді дәл таңдаудың орнына, сәл жоғары немесе төмен таңдау арқылы ашуға мүмкіндік береді:
- Сіздің екеніңізге көз жеткізіңіз #аты а тармағында элемент таңдалады CSS дизайнері қойынды.
- Бөлмедегі «дисплей» тақырыбына төмен қарай айналдырыңыз.
- «Көрсету» тақырыбының оң жақ шет жағын шертіңіз, содан кейін басыңыз блок алынған мәзірде.
Қадам 9. Қажет болса, толтырғышты қосыңыз
Егер сіз тізім элементтерінің бір -біріне жабысып қалғанын байқасаңыз, келесі әрекеттерді орындау арқылы олардың арасына бос орын қоюға болады:
- Сіздің екеніңізге көз жеткізіңіз #аты а тармағында элемент таңдалады CSS дизайнері қойынды.
- Бөлмедегі «толтыру» тақырыбына төмен қарай айналдырыңыз.
- Жоғарғы және төменгі «px» мәтін өрістерін кем дегенде 5 оқу үшін өзгертіңіз.
- Сол және оң жақтағы «px» мәтіндік өрістерді кемінде 10 оқуға өзгертіңіз.
Қадам 10. Жылжыту түсін жасаңыз
Бұл тінтуір меңзерін ашылмалы мәзірдегі элементтің үстіне апарғанда пайда болатын түс:
- Шертіңіз + «Таңдаушылар» тақырыбының оң жағында.
- #Nave a: hover теріңіз (мұнда «аты» - сіздің тізіміңіздің аты) және ↵ 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 пернесін екі рет басыңыз.
- «Қалқымалы» тақырыбын табыңыз.
- «Ешқайсысын» басыңыз () «қалқымалы» тақырыбының оң жағындағы опция.
Қадам 16. Жобаңызды сақтаңыз
Ол үшін Ctrl+S (Windows) немесе ⌘ Command+S (Mac) пернелерін басыңыз.
