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