როგორ შევქმნათ ჩამოსაშლელი მენიუ Dreamweaver-ში

Სარჩევი:

როგორ შევქმნათ ჩამოსაშლელი მენიუ Dreamweaver-ში
როგორ შევქმნათ ჩამოსაშლელი მენიუ Dreamweaver-ში
Anonim

რა უნდა იცოდე

  • გადადით Insert > ფორმა > ფორმა. დააწკაპუნეთ ფორმაზე წერტილოვან წითელ ხაზზე და გადადით Insert > ფორმა > სია/მენიუ. აირჩიეთ ხელმისაწვდომობის ვარიანტები.
  • დააწკაპუნეთ მენიუზე და აირჩიეთ მისი თვისებები, შემდეგ აირჩიეთ List values მენიუს ახალი ელემენტების დასამატებლად. დააწკაპუნეთ პლუს ნიშანი მეტი ელემენტის დასამატებლად.
  • დაამატეთ ელემენტის მნიშვნელობები და აირჩიეთ ნაგულისხმევი ელემენტი. მოქმედებების დასამატებლად გადადით Insert > ფორმა > გადახტომის მენიუ. დაამატეთ ელემენტები Jump მენიუში და შეინახეთ.

Dreamweaver აადვილებს ჩამოსაშლელი მენიუების შექმნას თქვენი ვებსაიტისთვის. მაგრამ, როგორც ყველა HTML ფორმა, ისინი შეიძლება იყოს ცოტა სახიფათო. ეს სახელმძღვანელო გაგაცნობთ ნაბიჯებს Dreamweaver-ში ჩამოსაშლელი მენიუს შესაქმნელად.

Dreamweaver Jump Menu

Dreamweaver 8 ასევე გთავაზობთ ოსტატს თქვენს ვებსაიტზე ნავიგაციისთვის ნახტომის მენიუს შესაქმნელად. ძირითადი ჩამოსაშლელი მენიუებისგან განსხვავებით, ეს მენიუ რაღაცას გააკეთებს, როცა დაასრულებთ. თქვენ არ მოგიწევთ JavaScript-ის ან CGI-ის დაწერა, რომ თქვენი ჩამოსაშლელი ფორმა იმუშაოს. ეს სახელმძღვანელო ასევე განმარტავს, თუ როგორ გამოიყენოთ Dreamweaver 8 ოსტატი გადახტომის მენიუს შესაქმნელად.

პირველ რიგში შექმენით ფორმა

Image
Image

გარდა სპეციალური ოსტატებისა, როგორიცაა ნახტომის მენიუ, Dreamweaver არ გეხმარებათ, რომ HTML ფორმები "მუშაობდეს". ამისთვის გჭირდებათ CGI ან JavaScript.

როდესაც თქვენ ამატებთ ჩამოსაშლელ მენიუს თქვენს ვებსაიტზე, პირველი რაც გჭირდებათ არის ფორმა მის გარშემო. Dreamweaver-ში გადადით Insert მენიუში და დააწკაპუნეთ ფორმაზე, შემდეგ აირჩიეთ "ფორმა."

ფორმის ჩვენება დიზაინის ხედში

Image
Image

Dreamweaver აჩვენებს თქვენი ფორმის მდებარეობას ვიზუალურად დიზაინის ხედში, ასე რომ თქვენ იცით სად განათავსოთ თქვენი ფორმის ელემენტები, რადგან ჩამოსაშლელი მენიუს ტეგები არ არის სწორი (და არ იმუშავებს) ფორმის ელემენტის გარეთ. როგორც სურათზე ხედავთ, ფორმა არის წითელი წერტილოვანი ხაზი დიზაინის ხედში.

აირჩიეთ სია/მენიუ

Image
Image

ჩასაშლელი მენიუები Dreamweaver-ში ეწოდება "list" ან "menu" ელემენტებს. ასე რომ, თქვენს ფორმაში ერთის დასამატებლად, თქვენ უნდა შეხვიდეთ Form მენიუში Insert მენიუში და აირჩიოთ "List/Menu". დარწმუნდით, რომ თქვენი კურსორი იყო თქვენი ფორმის ველის წითელ წერტილოვან ხაზში.

სპეციალური პარამეტრების ფანჯარა

Image
Image

Dreamweaver Options-ში არის ეკრანი ხელმისაწვდომობის შესახებ. თქვენი ჩამოსაშლელი მენიუები მაშინვე უფრო ხელმისაწვდომი გახდება, ვიდრე სხვა ვებსაიტები, თუ შეავსებთ ამ ხუთ ვარიანტს.

ფორმის ხელმისაწვდომობა

Image
Image

ხელმისაწვდომობის ვარიანტებია:

ლეიბლი

ლეიბლის ველი გამოჩნდება ტექსტის სახით თქვენი ფორმის ელემენტის გვერდით. ჩაწერეთ სახელი თქვენი ჩამოსაშლელი მენიუსთვის. ეს შეიძლება იყოს კითხვა ან მოკლე ფრაზა, რომელსაც ჩამოსაშლელი მენიუ უპასუხებს.

სტილი

HTML შეიცავს ლეიბლის ტეგს თქვენი ფორმის ლეიბლების იდენტიფიცირებისთვის ვებ ბრაუზერში. თქვენი არჩევანია ჩამოსაშლელი მენიუ და ლეიბლის ტექსტი ტეგით შეფუთოთ, გამოიყენოთ ატრიბუტი "for" ლეიბლის ტეგზე, რათა დაადგინოთ, რომელ ფორმის ტეგზე მიუთითებს, ან საერთოდ არ გამოიყენოთ ლეიბლის ტეგი.

პოზიცია

შეგიძლიათ განათავსოთ თქვენი ლეიბლი ჩამოსაშლელი მენიუს წინ ან მის შემდეგ.

წვდომის გასაღები

ვიზიტორებს შეუძლიათ გამოიყენონ წვდომის გასაღები "Image" ან Option კლავიშებით, რათა პირდაპირ მოხვდნენ ფორმის ველში. კლავიატურის ეს მალსახმობი ხდის თქვენს ფორმებს ძალიან მარტივ გამოსაყენებლად მაუსის გარეშე. alt="

ჩანართების ინდექსი

ჩანართების ინდექსი არის ის, თუ როგორ უნდა შევიდეს მომხმარებლებმა ფორმის ველებზე, როდესაც იყენებენ კლავიატურას ჩანართზე ვებ გვერდზე.

როდესაც განაახლებთ წვდომის ვარიანტებს, დააწკაპუნეთ OK.

აირჩიეთ მენიუ

Image
Image

როდესაც ჩამოსაშლელი მენიუ გამოჩნდება Dreamweaver-ის დიზაინის ხედში, თქვენ უნდა დაამატოთ სხვადასხვა ელემენტები. პირველ რიგში, აირჩიეთ ჩამოსაშლელი მენიუ მასზე დაწკაპუნებით. Dreamweaver დააყენებს სხვა წერტილოვან ხაზს მხოლოდ ჩამოსაშლელი მენიუს გარშემო, რათა აჩვენოს, რომ თქვენ ის აირჩიე.

მენიუ თვისებები

Image
Image

თვისებების მენიუ შეიცვლება ჩამოსაშლელი მენიუს სია/მენიუ თვისებებით. იქ შეგიძლიათ თქვენს მენიუს მისცეთ ID (სადაც წერია "არჩევა"), გადაწყვიტეთ, რომ ეს იყოს სია თუ მენიუ, მისცეთ სტილის კლასი თქვენი სტილის ფურცლიდან და მიანიჭეთ მნიშვნელობები ჩამოსაშლელ სიას..

რა განსხვავებაა სიასა და მენიუს შორის?

Dreamweaver უწოდებს მენიუს ჩამოსაშლელ მენიუს ნებისმიერ ჩამოსაშლელ მენიუს, რომელიც მხოლოდ ერთი არჩევის საშუალებას იძლევა. „სია“იძლევა მრავალჯერადი არჩევანის საშუალებას ჩამოსაშლელ სიაში და შეიძლება იყოს ერთზე მეტი ერთეულის სიმაღლე.

თუ გსურთ, რომ ჩამოსაშლელი მენიუ იყოს რამდენიმე ხაზის სიმაღლეზე, შეცვალეთ იგი "list" ტიპის და დატოვეთ "არჩევნების" ველი მონიშნული.

დაამატე ახალი სიის ერთეულები

Image
Image

თქვენს მენიუში ახალი ელემენტების დასამატებლად დააწკაპუნეთ ღილაკზე "List values…", რომელიც ხსნის ზემოთ მოცემულ ფანჯარას. შემდეგ ჩაწერეთ თქვენი ნივთის ეტიკეტი პირველ ველში. ის გამოჩნდება გვერდზე.

დაამატე მეტი და ხელახლა შეკვეთა

Image
Image

დააწკაპუნეთ პლუსის ხატულაზე მეტი ელემენტის დასამატებლად. თუ გსურთ მათი ხელახლა დალაგება სიის ველში, გამოიყენეთ ზემოთ და ქვემოთ ისრები მარჯვნივ.

მიეცით ყველა ელემენტის მნიშვნელობები

Image
Image

თუ მნიშვნელობას ცარიელი დატოვებთ, ეტიკეტი გადავა ფორმაში. მაგრამ თქვენ შეგიძლიათ მიანიჭოთ ყველა თქვენი ელემენტის მნიშვნელობა - ალტერნატიული ინფორმაციის გაგზავნა თქვენს ფორმაში. თქვენ გამოიყენებთ მას ბევრ რამეში, როგორიცაა ნახტომი მენიუები და ჰიპერბმულები.

აირჩიეთ ნაგულისხმევი

Image
Image

ვებ გვერდებზე ნაგულისხმევად ნაჩვენებია ჩამოსაშლელი ელემენტი, რომელიც ჩამოთვლილია პირველ რიგში, როგორც ნაგულისხმევი ელემენტი. მაგრამ თუ გსურთ სხვა არჩეული, მონიშნეთ ის "თავდაპირველად შერჩეული" ველში თვისებების მენიუში.

იხილეთ თქვენი სია დიზაინის ხედში

Image
Image

როგორც კი დაასრულებთ თვისებების რედაქტირებას, Dreamweaver აჩვენებს თქვენს ჩამოსაშლელ სიას არჩეული ნაგულისხმევი მნიშვნელობით.

იხილეთ თქვენი სია კოდების ხედში

Image
Image

თუ გადახვალთ კოდის ხედზე, ხედავთ, რომ Dreamweaver ამატებს თქვენს ჩამოსაშლელ მენიუს სუფთა კოდით. ერთადერთი დამატებითი ატრიბუტი არის ხელმისაწვდომობის პარამეტრები. კოდი მთლიანად ჩაჭრილია და ძალიან ადვილად წასაკითხი და გასაგები.

შენახვა და ნახვა ბრაუზერში

Image
Image

თუ შეინახავთ დოკუმენტს და იხილავთ მას ვებ-ბრაუზერში, ხედავთ, რომ თქვენი ჩამოსაშლელი მენიუ გამოიყურება ისე, როგორც თქვენ მოელით.

მაგრამ ეს არაფერს აკეთებს…

Image
Image

მენიუ, რომელიც ზემოთ შევქმენით, კარგად გამოიყურება, მაგრამ არაფერს აკეთებს. რაღაცის გასაკეთებლად, თქვენ უნდა დააყენოთ ფორმის მოქმედება თავად ფორმაზე.

საბედნიეროდ, Dreamweaver-ს აქვს ჩაშენებული ჩამოსაშლელი მენიუს ფორმა, რომელიც შეგიძლიათ გამოიყენოთ დაუყოვნებლივ თქვენს საიტზე, ფორმების, CGI-ების ან სკრიპტების გაცნობის საჭიროების გარეშე. მას ჰქვია Jump Menu.

Dreamweaver Jump Menu აყალიბებს ჩამოსაშლელ მენიუს სახელებითა და URL-ებით. შემდეგ მენიუში შეგიძლიათ აირჩიოთ ელემენტი და ვებ გვერდი გადავა ამ ადგილას, ისევე, როგორც ბმულზე დააწკაპუნეთ.

გადადით მენიუში ჩასმა და აირჩიეთ ფორმა და შემდეგ გადასვლა მენიუ.

გადახტომის მენიუს ფანჯარა

Image
Image

სტანდარტული ჩამოსაშლელი მენიუსგან განსხვავებით, Jump მენიუ ხსნის ახალ ფანჯარას, რათა დაასახელოთ თქვენი მენიუს ელემენტები და დაამატოთ დეტალები იმის შესახებ, თუ როგორ უნდა იმუშაოს ფორმა.

პირველი პუნქტისთვის შეცვალეთ ტექსტი "un titled1" იმით, რისი წაკითხვაც გსურთ და დაამატეთ URL.

დაამატეთ ელემენტები თქვენს Jump მენიუში

Image
Image

დააწკაპუნეთ დამატებაზე, რათა დაამატოთ ახალი ელემენტი თქვენს გადახტომის მენიუში. დაამატეთ იმდენი ელემენტი, რამდენიც გსურთ.

გადახტომის მენიუს ოფციები

Image
Image

როგორც კი დაამატებთ ყველა სასურველ ბმულს, უნდა აირჩიოთ თქვენი ვარიანტები:

გახსენით URL-ები -ში

თუ თქვენ გაქვთ ჩარჩოს ნაკრები, შეგიძლიათ გახსნათ ბმულები სხვა ჩარჩოში. ან შეგიძლიათ შეცვალოთ მთავარი ფანჯრის ვარიანტი სპეციალურ სამიზნეზე, რათა URL გაიხსნას ახალ ფანჯარაში ან სხვაგან.

მენიუს სახელი

მიეცით თქვენს მენიუს გვერდის უნიკალური ID. ეს საჭიროა იმისათვის, რომ სკრიპტმა სწორად იმუშაოს. ის ასევე გაძლევთ საშუალებას გქონდეთ მრავალი ნახტომი მენიუ ერთი ფორმით - მიეცით მათ ყველა განსხვავებული სახელი.

მიუსვლის ღილაკის ჩასმა მენიუს შემდეგ

მე მომწონს ამის არჩევა, რადგან ზოგჯერ სკრიპტი არ მუშაობს, როდესაც მენიუ იცვლება. ის ასევე უფრო ხელმისაწვდომია.

აირჩიეთ პირველი ელემენტი URL-ის შეცვლის შემდეგ

აირჩიეთ ეს, თუ მენიუს პირველ ელემენტად გაქვთ მოთხოვნა, როგორიცაა "აირჩიეთ ერთი". ეს უზრუნველყოფს, რომ ეს ელემენტი ნაგულისხმევად დარჩეს გვერდზე.

Jump Menu Design View

Image
Image

ისევე, როგორც თქვენი პირველი მენიუს შემთხვევაში, Dreamweaver აყენებს თქვენს ნახტომის მენიუს დიზაინის ხედში ნაგულისხმევი ელემენტის ხილვით. შემდეგ შეგიძლიათ დაარედაქტიროთ ჩამოსაშლელი მენიუ, როგორც სხვა.

თუ თქვენ დაარედაქტირებთ, დარწმუნდით, რომ არ შეცვალოთ ID-ები ერთეულებზე; წინააღმდეგ შემთხვევაში, სკრიპტმა შეიძლება არ იმუშაოს.

Jump მენიუ ბრაუზერში

Image
Image

ფაილის შენახვა და F12 დაჭერით გამოჩნდება გვერდი თქვენთვის სასურველ ბრაუზერში. იქ შეგიძლიათ აირჩიოთ ვარიანტი, დააწკაპუნოთ „გადასვლა“-ზე და გადახტომის მენიუ მუშაობს.

გირჩევთ: