Teman-teman yang telah menggunakan QQ untuk ngobrol semuanya menyukai fungsi penyembunyian jendela otomatis, yang dapat membuat jendela terlihat segar, bersih, dan dinamis. Beberapa teman saya ingin menambahkan hal serupa ke halaman web mereka, dan setelah penjelajahan bersama, mereka menemukan ini efek dapat dicapai dengan Dreamweaer. Mari kita lihat produksi menu bar yang aktif.
Langkah 1: Buat tampilan menu
Gambar 1
Buat file baru di Dreamweaer, gambar layer, masukkan tabel ke dalam layer (Gambar 1), modifikasi tabel, lalu tambahkan item menu dan buat hyperlink ke setiap item, untuk menghilangkan garis bawah hyperlink, Anda dapat mengedit gaya CSS hyperlink. Di panel gaya CSS, atur "Dekorasi" dari "Tautan" dan "Arahkan" ke "Tidak Ada" melalui pemilih CSS, dan atur "Warna" dari "Arahkan". )" disetel ke merah, dan terakhir gaya yang disetel diterapkan ke setiap bilah menu (Anda dapat menekan tombol "F12" untuk melihat pratinjau efeknya).
Langkah 2: Rancang efek dinamis menu
1. Pilih layer, tahan tombol kiri saat mouse berubah menjadi bentuk "silang", dan seret layer ke sudut kanan atas halaman (sehingga seluruh menu bar terekspos sepenuhnya tetapi tepi atas hanya dekat dengan halaman Perbatasan), buka panel timeline di menu jendela, pilih layer dan seret ke timeline. Dreamweaer secara otomatis akan menghasilkan objek animasi dengan panjang 15 frame. Tarik keyframe terakhir objek animasi ke frame ke-30, atur panjangnya menjadi 30 frame. Kemudian klik kanan pada frame 15, pilih opsi "Tambahkan Keyframe" di menu pintasan pop-up untuk menyisipkan keyframe, dan seret layer ke posisi yang sesuai (Gambar 2). Klik kanan lagi pada frame 15 di jendela timeline dan pilih "Tambahkan Tindakan" dari menu pintasan pop-up untuk menambahkan perilaku interaktif ke frame. Klik tombol "+" di panel perilaku, pilih "Timeline/Stop Timeline" dari menu pop-up, buka kotak dialog "Stop Timeline", pilih "Timeline1" dan klik tombol "OK" untuk menutup kotak dialog . Peristiwa perilaku interaktifnya adalah "onFrame15" dan tindakannya adalah "Stop Timeline", sehingga ketika timeline mencapai frame ke-15, animasi akan berhenti diputar, sehingga mewujudkan fungsi pantulan bilah menu.
Gambar 2
2. Gunakan metode yang sama untuk menambahkan perilaku interaktif "Hentikan Timeline" pada frame ke-30 timeline, sehingga mewujudkan fungsi menu pop-up. Setelah menambahkan dua perilaku interaktif ini, kotak biru muncul pada bingkai terkait di jendela timeline, yang mewakili perilaku interaktif. Pilih kotak centang "Putar Otomatis dan Ulangi" untuk mengaktifkan animasi berulang secara otomatis (Gambar 3).
Gambar 3
3. Sekarang kita perlu menyiapkan perilaku yang memungkinkan timeline terus diputar setelah dihentikan. Ide saya adalah ini: dalam keadaan normal, bilah menu muncul tetapi hanya mempertahankan tulisan "Campus Grand View" di bawah, dan pop-up serta pantulan bilah menu dikendalikan oleh apakah mouse melewati "Campus Grand Lihat" pada bilah menu. . Anda dapat melanjutkan seperti ini: Pilih kata "Campus Grand View" di bilah menu (pastikan alamat hyperlink dari kata ini adalah "#", yaitu tautan kosong), klik tombol "+" di panel perilaku , dan di pop-up Pilih "Timeline/Play Timeline" dari menu, pilih "Timeline1" di kotak dialog yang muncul dan klik tombol OK. Saat ini, suatu perilaku akan ditambahkan ke panel perilaku, dan pilih acara "onMouseOver" di daftar drop-down "Events", yang menunjukkan bahwa animasi akan diputar saat mouse berada di atas kata (Gambar 4).
Gambar 4
Pada titik ini, bilah menu aktif telah selesai. Anda dapat menekan tombol "F12" untuk melihat efeknya.
Namun menu bar ini memiliki satu kekurangan: harus hilang ketika mouse melewati area tertentu di bawah menu bar (dalam hal ini, tulisan "Campus Grand View"). Jika ingin membuat menu bar muncul, cukup klik Gerakkan mouse menjauh dari bilah menu untuk menghilangkan menu tersebut. Anda mungkin perlu menggunakan Fireworks atau Flash.