ეს wikiHow გასწავლით თუ როგორ გამოიყენოთ Adobe Dreamweaver ვებ-გვერდის ჩამოსაშლელი ყუთის შესაქმნელად. ჩამოსაშლელი ყუთები არის მენიუები, რომლებიც "იშლება", როდესაც თქვენს ვებგვერდზე ერთეულს დააწკაპუნებთ, რაც უფრო მეტ ვარიანტს წარმოგიდგენთ პროცესში.
ნაბიჯები
ნაბიჯი 1. გახსენით Dreamweaver პროექტი
ამისათვის ორჯერ დააწკაპუნეთ პროექტის ფაილზე. თუ გსურთ შექმნათ ახალი Dreamweaver პროექტი, თქვენ გახსნით Dreamweaver– ს, დააწკაპუნეთ ფაილი, დააწკაპუნეთ ახალი და მიჰყევით ეკრანზე მითითებებს.
ნაბიჯი 2. შექმენით შეკვეთილი სია
ჩამოსაშლელი მენიუს შესაქმნელად, თქვენ უნდა გქონდეთ მინიმუმ ერთი ტყვიის წერტილი. თქვენ შეგიძლიათ შექმნათ ტყვიის წერტილი CSS– ის გამორთვით (დააწკაპუნეთ ნახვა მენიუს პუნქტი, აირჩიეთ სტილის გაწევა, და დააწკაპუნეთ ჩვენების სტილები თუ ის შემოწმებულია), დააწკაპუნეთ იმ ადგილას, სადაც გსურთ დაამატოთ წერტილი, დააწკაპუნოთ ტყვიის წერტილის ხატზე ფანჯრის ბოლოში და ჩაწეროთ წერტილის სახელი. შემდეგ თქვენ უნდა ჩართოთ CSS სანამ გააგრძელებთ.
- წერტილის სახელი აქ იქნება თქვენი ჩამოსაშლელი მენიუს აქტივატორი (მაგ. ღილაკი, რომელზედაც ის მოძრაობს ან შეეხება ჩამოსაშლელი მენიუს გასახსნელად).
- გამოტოვეთ ეს ნაბიჯი, თუ უკვე გაქვთ სიის ელემენტი, რომლის გადაკეთებაც გსურთ ჩამოსაშლელ მენიუში.
ნაბიჯი 3. განსაზღვრეთ თქვენი სიის სახელი
დააწკაპუნეთ კოდი ჩანართი და დარწმუნდით, რომ თქვენ ხართ Საწყისი კოდი პარამეტრი, შემდეგ გადაახვიეთ ქვემოთ თქვენი შეკვეთილი სიის კოდზე (ის იქნება"
"ტეგი და"
"tag" და მოძებნე "" ზედა ნაწილში"
tag. სიტყვა ციტატებში არის თქვენი სიის სახელი.
-
თუ თქვენ ვერ ხედავთ სახელს, ჩაწერეთ ტეგი (სადაც სახელი ეხება სიის თქვენთვის სასურველ სახელს) პირდაპირ ზემოთ
წარწერა
ნაბიჯი 4. ამოიღეთ ტყვიის წერტილი (ები)
დარწმუნდით, რომ თქვენ სწორ ადგილას ხართ დაჭერით დიზაინი ჩანართზე და შემდეგ დააჭირეთ ღილაკს CSS დიზაინერი ფანჯრის ზედა მარჯვენა კუთხეში, შემდეგ გააკეთეთ შემდეგი:
- დააწკაპუნეთ + სათაურის "სელექციონერების" მარჯვნივ.
- ჩაწერეთ #სახელი ul სადაც "სახელი" არის თქვენი სიის სახელი.
- ორჯერ დააჭირეთ ↵ შეყვანას.
- გადაახვიეთ ქვემოთ და დააწკაპუნეთ სიის სტილის ტიპი სარკმლის ბოლოში CSS დიზაინერი ჩანართი
- დააწკაპუნეთ არცერთი შედეგად pop-up მენიუში.
ნაბიჯი 5. შეცვალეთ თქვენი შეკვეთილი სია ჰორიზონტალურად გამოსაჩენად
Ამის გაკეთება:
- დააწკაპუნეთ + სათაურის "სელექციონერების" მარჯვნივ.
- ჩაწერეთ #სახელი ლი სადაც "სახელი" არის თქვენი სიის სახელი.
- იპოვეთ "float" სათაური სარკმლის ბოლოში CSS დიზაინერი ჩანართი
- დააწკაპუნეთ მარცხენა ღილაკი დაუყოვნებლივ "float" სათაურის მარჯვნივ.
ნაბიჯი 6. დაამატეთ აქტიური ტეგი თქვენი სიისთვის
დააწკაპუნეთ + ღილაკს "სელექტორები", შემდეგ ჩაწერეთ #სახელი a (სადაც "სახელი" არის თქვენი სიის სახელი) და დააჭირეთ ↵ ორჯერ.
ნაბიჯი 7. დაამატეთ ფონის ფერი
აირჩიეთ #სახელი ა საჭიროების შემთხვევაში, შემდეგ დააწკაპუნეთ ყუთის ფორმის "ფონის ფერი" ჩანართზე ზედა ნაწილში CSS დიზაინერი ფანჯარა, აირჩიეთ ფონის ფერი ვარიანტი და აირჩიეთ ფონის ფერი გამოსაყენებლად.
ეს არის ფერი, რომელსაც გამოიყენებს თქვენი ჩამოსაშლელი სიის ერთეულები
ნაბიჯი 8. გააკეთეთ თქვენი სიის ერთეულები "ბლოკის" ფორმატით
ეს ფორმატი უზრუნველყოფს იმას, რომ როდესაც ვინმე მიდის ჩამონათვალში არსებულ ერთეულზე დაწკაპუნებაზე ან დაკრეკვაზე, მას შეუძლია გახსნას იგი ოდნავ ზემოთ ან ქვემოთ მონიშნვით, ნაცვლად იმისა, რომ ზუსტად შეარჩიოს ტექსტი:
- დარწმუნდით, რომ თქვენი #სახელი ა ელემენტი არჩეულია CSS დიზაინერი ჩანართი
- გადაახვიეთ ქვემოთ "საჩვენებელი" სათაურში პანელში.
- დააწკაპუნეთ "ჩვენების" სათაურის მარჯვენა მხარეს, შემდეგ დააწკაპუნეთ ბლოკი შედეგად მენიუში.
ნაბიჯი 9. საჭიროების შემთხვევაში დაამატეთ ბალიში
თუ შეამჩნევთ, რომ თქვენი სიის ერთეულები ერთმანეთზეა შეკრული, თქვენ შეგიძლიათ განათავსოთ გარკვეული ადგილი მათ შორის შემდეგით:
- დარწმუნდით, რომ თქვენი #სახელი ა ელემენტი არჩეულია CSS დიზაინერი ჩანართი
- გადაახვიეთ ქვემოთ "padding" სათაურში.
- შეცვალეთ ზედა და ქვედა "px" ტექსტური ველები, რომ წაიკითხოთ მინიმუმ 5.
- შეცვალეთ მარცხენა და მარჯვენა "px" ტექსტური ველები, რომ წაიკითხოთ მინიმუმ 10.
ნაბიჯი 10. შექმნა hover ფერი
ეს არის ფერი, რომელიც გამოჩნდება, როდესაც მაუსის კურსორი გადაიტანეთ ჩამოსაშლელ მენიუს ერთეულზე:
- დააწკაპუნეთ + სათაურის "სელექციონერების" მარჯვნივ.
- ჩაწერეთ #nave a: hover (სადაც "სახელი" არის თქვენი სიის სახელი) და დააჭირეთ ↵ ორჯერ.
- დააჭირეთ ღილაკს "ფონის ფერი".
- აირჩიეთ ფონის ფერი და შემდეგ შეარჩიეთ უფრო ღია ფერი, ვიდრე გამოიყენეთ ფონისთვის.
ნაბიჯი 11. გამორთეთ CSS
დააწკაპუნეთ ნახვა მენიუს პუნქტი, აირჩიეთ სტილის გაწევა, და დააწკაპუნეთ ჩვენების სტილები ვარიანტი ამომხტარი ფანჯარაში.
თუკი ჩვენების სტილები ვარიანტი ნაცრისფერია, დააწკაპუნეთ სადმე თქვენი Dreamweaver დოკუმენტში და სცადეთ ხელახლა.
ნაბიჯი 12. შექმენით ჩამოსაშლელი მენიუს შინაარსი
ამის გაკეთება შეგიძლიათ ტყვიის ქვევით ქვეპუნქტების დამატებით, რომელთა გამოყენება გსურთ ჩამოსაშლელი მენიუს ღილაკად:
- დააწკაპუნეთ სიის ერთეულის მარჯვნივ, რომლის ჩამოსაშლელი მენიუც გსურთ, შემდეგ დააჭირეთ ↵ Enter.
- დააჭირეთ Tab ↹.
- ჩაწერეთ თქვენი პირველი ჩამოსაშლელი მენიუს ერთეულის სახელი, შემდეგ დააჭირეთ ↵ Enter.
- ჩაწერეთ შემდეგი ჩამოსაშლელი მენიუს სახელი, შემდეგ დააჭირეთ ↵ Enter და გაიმეორეთ საჭიროებისამებრ.
ნაბიჯი 13. მიამაგრეთ ჩამოსაშლელი მენიუს შინაარსი ტყვიის ელემენტზე
Ამის გაკეთება:
- დააწკაპუნეთ + "ამომრჩევლების" გვერდით, შემდეგ ჩაწერეთ #სახელი ul ul და დააჭირეთ ↵ ორჯერ.
- გადაახვიეთ ქვემოთ და დააწკაპუნეთ ჩვენება, შემდეგ დააწკაპუნეთ არცერთი ამომხტარი მენიუში.
- იპოვეთ და დააწკაპუნეთ პოზიცია, შემდეგ დააწკაპუნეთ აბსოლუტური ამომხტარი მენიუში.
ნაბიჯი 14. შექმენით ჩამოსაშლელი მენიუ
ამისათვის თქვენ უნდა დაამატოთ კიდევ ერთი სელექტორი:
- დააწკაპუნეთ + "ამომრჩევლების" გვერდით, შემდეგ ჩაწერეთ #სახელი ul li: hover> ul და დააჭირეთ ↵ ორჯერ.
- იპოვეთ და დააწკაპუნეთ ჩვენება, შემდეგ დააწკაპუნეთ ბლოკი შედეგად pop-up მენიუში.
ნაბიჯი 15. გააკეთეთ ჩამოსაშლელი მენიუს შინაარსი ვერტიკალურად
სტანდარტულად, ჩამოსაშლელი მენიუს შინაარსი გამოჩნდება ჰორიზონტალურ ზოლში, მაგრამ თქვენ შეგიძლიათ აიძულოთ ისინი ვერტიკალურ სვეტში შეასრულოთ შემდეგი:
- დააწკაპუნეთ + "ამომრჩევლების" გვერდით, შემდეგ ჩაწერეთ #სახელი ul ul li და დააჭირეთ ↵ ორჯერ.
- იპოვეთ სათაური "float".
- დააწკაპუნეთ "არცერთზე" () ვარიანტი "float" სათაურის მარჯვნივ.
ნაბიჯი 16. შეინახეთ თქვენი პროექტი
ამისათვის დააჭირეთ Ctrl+S (Windows) ან ⌘ Command+S (Mac).
