Dreamweaver -də bir açılan qutu necə əlavə etmək olar (şəkillərlə birlikdə)

Mündəricat:

Dreamweaver -də bir açılan qutu necə əlavə etmək olar (şəkillərlə birlikdə)
Dreamweaver -də bir açılan qutu necə əlavə etmək olar (şəkillərlə birlikdə)

Video: Dreamweaver -də bir açılan qutu necə əlavə etmək olar (şəkillərlə birlikdə)

Video: Dreamweaver -də bir açılan qutu necə əlavə etmək olar (şəkillərlə birlikdə)
Video: Varlı, yoxsa kasıb olacaqsınız? - BURADAN ÖYRƏNİN 2024, Aprel
Anonim

Bu wikiHow, bir web səhifəsi üçün açılan bir qutu yaratmaq üçün Adobe Dreamweaver istifadə etməyi öyrədir. Açılan qutular, veb səhifənizdəki bir element tıklandığında "açılan" olan və prosesdə daha çox seçim təqdim edən menyulardır.

Addımlar

Dreamweaver Addım 1 -də açılan qutu əlavə edin
Dreamweaver Addım 1 -də açılan qutu əlavə edin

Addım 1. Dreamweaver layihəsini açın

Bunu etmək üçün layihənin faylını iki dəfə vurun. Yeni bir Dreamweaver layihəsi yaratmaq istəyirsinizsə, bunun əvəzinə Dreamweaver -ı açacaqsınız, üzərinə vurun Fayl, vurun Yenivə ekrandakı istənilən əmrləri yerinə yetirin.

Dreamweaver Addım 2 -də açılan qutu əlavə edin
Dreamweaver Addım 2 -də açılan qutu əlavə edin

Addım 2. Sifariş verilmiş bir siyahı yaradın

Açılan bir menyu yaratmaq üçün ən az bir güllə nöqtəsi olmalıdır. CSS -ni söndürməklə bir güllə nöqtəsi yarada bilərsiniz Baxın menyu maddəsini seçin Stil göstərməvə vurun Ekran üslubları yoxlanılıbsa), nöqtəni əlavə etmək istədiyiniz yeri vurun, pəncərənin altındakı işarələmə nöqtəsi simgesini basın və nöqtənin adını yazın. Davam etmədən əvvəl CSS -ni yenidən açmalısınız.

  • Buradakı nöqtənin adı açılan menyunuzun aktivatoru kimi xidmət edəcək (məsələn, açılan menyunu açmaq üçün üzərinə getdiyi və ya vurduğu düymə).
  • Açılan bir menyuya çevirmək istədiyiniz bir siyahı elementiniz varsa bu addımı atlayın.
Dreamweaver Addım 3 -də açılan qutu əlavə edin
Dreamweaver Addım 3 -də açılan qutu əlavə edin

Addım 3. Siyahınızın adını təyin edin

Düyməsini basın Kod sekmesine daxil olun və siyahıda olduğunuzdan əmin olun Mənbə Kodu Ayarlayın, sonra sifariş siyahınızın koduna gedin ("arasında" olacaq

"etiket və"

"tag) və yuxarıdakı" "etiketini axtarın

etiketi. Tırnaklardakı söz siyahınızın adıdır.

  • Bir ad görmürsünüzsə, etiketi (ad siyahının ən çox bəyəndiyiniz adı ilə əlaqəlidir) daxil edin

    etiket.

Dreamweaver Addım 4 -də açılan qutu əlavə edin
Dreamweaver Addım 4 -də açılan qutu əlavə edin

Addım 4. Maddə işarəsi nöqtələrini çıxarın

Düyməsini tıklayaraq doğru yerdə olduğunuzdan əmin olun Dizayn sekmesini vurun və sonra vurun CSS Dizayner Pəncərənin yuxarı sağ küncündəki nişanı açın, sonra aşağıdakıları edin:

  • Basın + "Seçicilər" başlığının sağında.
  • #Name ul yazın, burada "ad" siyahınızın adıdır.
  • ↵ Enter düyməsini iki dəfə basın.
  • Aşağı diyirləyin və vurun siyahı tərzi növü bölmənin altındakı bölmədə CSS Dizayner nişanı
  • Basın heç biri nəticədə açılan menyuda.
Dreamweaver Addım 5 -də açılan qutu əlavə edin
Dreamweaver Addım 5 -də açılan qutu əlavə edin

Addım 5. Sifariş verdiyiniz siyahını üfüqi olaraq göstərin

Belə etmək:

  • Basın + "Seçicilər" başlığının sağında.
  • #Name li yazın, burada "ad" siyahınızın adıdır.
  • Bölmənin altındakı bölmədə "üzmək" başlığını tapın CSS Dizayner nişanı
  • Düyməsini basın Sol dərhal "üzmək" başlığının sağındakı düyməni basın.
Dreamweaver Addım 6 -da açılan qutu əlavə edin
Dreamweaver Addım 6 -da açılan qutu əlavə edin

Addım 6. Siyahınız üçün aktiv bir etiket əlavə edin

Düyməsini basın + "Seçicilər" in sağındakı düyməni vurun, sonra #ad a yazın (burada "ad" siyahınızın adıdır) və ↵ iki dəfə basın.

Dreamweaver Addım 7 -də açılan qutu əlavə edin
Dreamweaver Addım 7 -də açılan qutu əlavə edin

Addım 7. Arxa fon rəngi əlavə edin

Seçin #adı a zərurət yarandıqda, yuxarıdakı qutu şəkilli "Arxa fon rəngi" sekmesini vurun CSS Dizayner bölməsində seçin fon rəngi seçin və istifadə etmək üçün bir fon rəngi seçin.

Bu, açılan siyahıdakı maddələrin istifadə edəcəyi rəngdir

Dreamweaver Addım 8 -də açılan qutu əlavə edin
Dreamweaver Addım 8 -də açılan qutu əlavə edin

Addım 8. Siyahı maddələrinizi "blok" formatından istifadə edin

Bu format, kimsə siyahıdakı bir elementi tıkladıqda və ya vurduqda, mətni dəqiq seçmək əvəzinə bir az yuxarı və ya aşağı seçərək aça biləcəyini təmin edir:

  • Əmin olun #adı a maddə seçilir CSS Dizayner nişanı
  • Bölmədə "ekran" başlığına qədər aşağı diyirləyin.
  • "Göstər" başlığının sağ kənarını, sonra vurun blok yaranan menyuda.
Dreamweaver Addım 9 -da açılan qutu əlavə edin
Dreamweaver Addım 9 -da açılan qutu əlavə edin

Addım 9. Gerekirse, doldurma əlavə edin

Siyahı maddələrinizin bir -birinə sıxışdırıldığını görürsünüzsə, aşağıdakıları etməklə aralarına bir az boşluq qoya bilərsiniz:

  • Əmin olun #adı a maddə seçilir CSS Dizayner nişanı
  • Bölmədə "doldurma" başlığına gedin.
  • Ən azı 5 oxumaq üçün yuxarı və aşağı "px" mətn sahələrini dəyişdirin.
  • Sol və sağdakı "px" mətn sahələrini ən azı 10 oxumaq üçün dəyişdirin.
Dreamweaver Addım 10 -a Açılır Qutu əlavə edin
Dreamweaver Addım 10 -a Açılır Qutu əlavə edin

Addım 10. Hover rəngi yaradın

Siçan imlecinizi açılan menyudakı bir elementin üzərinə gətirdiyiniz zaman görünəcək rəng budur:

  • Basın + "Seçicilər" başlığının sağında.
  • #Nave a: hover yazın ("ad" siyahınızın adıdır) və ↵ iki dəfə basın.
  • "Arxa fon rəngi" sekmesini vurun.
  • Seçin fon rəngi və sonra fon rəngi üçün istifadə etdiyinizdən daha açıq rəng seçin.
Dreamweaver Addım 11 -də açılan qutu əlavə edin
Dreamweaver Addım 11 -də açılan qutu əlavə edin

Addım 11. CSS -i söndürün

Düyməsini basın Baxın menyu maddəsini seçin Stil göstərməvə vurun Ekran üslubları açılan pəncərədə seçim.

Əgər Ekran üslubları seçim boz rəngdədir, Dreamweaver sənədinizin hər hansı bir yerini vurun və yenidən cəhd edin.

Dreamweaver Addım 12 -də açılan qutu əlavə edin
Dreamweaver Addım 12 -də açılan qutu əlavə edin

Addım 12. Açılan menyu məzmununu yaradın

Açılan menyunun düyməsi kimi istifadə etmək istədiyiniz işarənin altına alt nöqtələr əlavə edərək bunu edə bilərsiniz:

  • Açılan bir menyuya çevirmək istədiyiniz siyahı elementinin sağındakı klikləyin və sonra ↵ Enter düyməsini basın.
  • Tab ↹ düyməsini basın.
  • İlk açılan menyu elementinizin adını yazın, sonra ↵ Enter düyməsini basın.
  • Növbəti açılan menyunun adını yazın, sonra ↵ Enter düyməsini basın və lazım olduqda təkrarlayın.
Dreamweaver Addım 13 -də açılan qutu əlavə edin
Dreamweaver Addım 13 -də açılan qutu əlavə edin

Addım 13. Açılan menyu məzmununu bir güllə maddəsinə bağlayın

Belə etmək:

  • Basın + "Seçicilər" in yanına, #name ul ul yazın və ↵ Enter düyməsini iki dəfə basın.
  • Aşağı diyirləyin və vurun göstərmək, sonra vurun heç biri açılan menyuda.
  • Tapın və vurun mövqe, sonra vurun mütləq açılan menyuda.
Dreamweaver Addım 14 -də açılan qutu əlavə edin
Dreamweaver Addım 14 -də açılan qutu əlavə edin

Addım 14. Açılan menyunun özünü yaradın

Bunu etmək üçün başqa bir seçici əlavə etməlisiniz:

  • Basın + "Seçicilərin" yanına, sonra #name ul li: hover> ul yazın və ↵ Enter düyməsini iki dəfə basın.
  • Tapın və vurun göstərmək, sonra vurun blok nəticədə açılan menyuda.
Dreamweaver Addım 15 -də açılan qutu əlavə edin
Dreamweaver Addım 15 -də açılan qutu əlavə edin

Addım 15. Açılan menyunun məzmununu şaquli olaraq göstərin

Varsayılan olaraq, açılan menyu məzmunu üfüqi bir çubuqda göstəriləcək, ancaq bunları edərək şaquli bir sütuna məcbur edə bilərsiniz:

  • Basın + "Seçicilərin" yanına, sonra #name ul ul li yazın və ↵ Enter düyməsini iki dəfə basın.
  • "Üzmək" başlığını tapın.
  • "Yox" düyməsini basın () "üzmək" başlığının sağındakı seçim.
Dreamweaver Addım 16 -da açılan qutu əlavə edin
Dreamweaver Addım 16 -da açılan qutu əlavə edin

Addım 16. Layihənizi qeyd edin

Bunu etmək üçün Ctrl+S (Windows) və ya ⌘ Command+S (Mac) düymələrini basın.

Bu layihə üçün yeni bir Dreamweaver faylı yaratmısınızsa, bir ad daxil etməli, bir saxlama yeri seçməlisiniz və üzərinə klikləməlisiniz Yadda saxla faylınızı saxlamaq üçün.

Tövsiyə: