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.
Buat file baru di Dreamweaer, gambar layer, masukkan tabel ke dalam layer (seperti yang ditunjukkan pada Gambar 1), modifikasi tabel, lalu tambahkan item menu dan buat hyperlink ke setiap item untuk menghapus garis bawah hyperlink, Anda dapat mengedit gaya CSS hyperlink. Di panel gaya CSS, atur "Dekorasi" dari "Link" dan "Hover" ke "None" melalui pemilih CSS ". Warna" diatur ke merah, dan akhirnya gaya yang ditetapkan diterapkan ke setiap bilah menu (Anda dapat menekan tombol "F12" untuk melihat pratinjau efeknya).
Gambar 1
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 bilah menu terekspos sepenuhnya tetapi tepi atasnya hanya terlihat dekat tepi atas halaman), dan buka waktu di menu jendela Panel garis, pilih layer dan seret ke timeline. Dreamweaer secara otomatis akan menghasilkan objek animasi dengan panjang 15 frame objek animasi ke frame ke-30 dan 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).
Gambar 2 Klik kanan lagi pada frame 15 di jendela timeline, pilih "Tambahkan Tindakan" di menu pintasan pop-up, tambahkan perilaku interaktif ke frame, dan Dreamweaer akan secara otomatis membuka panel perilaku. 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.
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 Anda 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 link 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.
