Spesifikasi HTML 4.0 baru yang ditentukan oleh organisasi W3C ( www.w3c.org ) menghadirkan alat yang lebih canggih bagi setiap perancang web. Ini adalah perubahan yang memengaruhi semua pengembang dan perancang web yang telah dipikirkan banyak orang di masa lalu yang tak terbayangkan sekarang dapat dengan mudah dicapai dengan bantuan DHTML dan CSS. Berikut adalah penjelasan rinci tentang penerapan beberapa efek selama proses kompilasi halaman web.
* Teknologi menu
Jika orang yang pernah mengunjungi situs Microsoft dan Macromedia pasti akan memperhatikan teknologi menu, Klik untuk menampilkan submenu, dan klik lagi untuk menyembunyikan submenu. Penulis mengunduh dua halaman ini masing-masing. Setelah menganalisis kode sumber, saya menemukan bahwa keduanya tidak menggunakan metode yang sama, dan kedua metode tersebut memiliki kelebihan dan kekurangannya masing-masing.
Macromedia menggunakan teknologi multi-halaman. Yaitu dengan terlebih dahulu membuat halaman menu utama tanpa item yang diperluas, kemudian membuat halaman untuk setiap item menu utama yang diperluas. Berapa banyak subhalaman yang diperlukan agar sesuai dengan jumlah item dalam menu utama. Mari kita berikan contoh sederhana untuk mengilustrasikannya:
Klik di sini!
daftar 1
daftar 2
daftar 3
Klik Klik di sini! pada Gambar 1 dan efek Gambar 2 akan muncul. Selama implementasi spesifik, Anda harus memperhatikan definisi dan penggunaan tag , dan mencapai korespondensi satu-ke-satu, jika tidak maka akan kacau. Selain itu, jika terdapat banyak item menu, ingatlah bahwa hanya submenu yang terdaftar saat ini yang didefinisikan dengan , dan item menu utama lainnya harus ditautkan ke halaman diperluas terkait.
Cara ini sangat sederhana untuk diterapkan, dapat dikuasai oleh orang awam dengan cepat, dan dapat didukung oleh browser apa pun, namun kekurangannya juga terlihat jelas. Pertama-tama, ini lambat. Memanggil setiap halaman bolak-balik pasti akan menyebabkan penantian yang lama. Hanya ketika halaman tersebut penuh dengan teks, Anda tidak akan merasa stagnan. Kedua, sulit untuk dikompilasi , agak repot untuk memproduksinya satu per satu. Oleh karena itu, teknologi ini masih memiliki keterbatasan tertentu.
Microsoft menggunakan teknologi DHTML. DHTML adalah teknologi yang relatif baru, jadi untuk beberapa browser "lama", metode penerapan menu ini tidak berguna.
Mari kita beri contoh untuk mengilustrasikannya.
Seperti terlihat pada gambar 3, klik Product & Services maka akan langsung muncul menu berikut, klik lagi maka akan hilang sama saja dengan Macromedia, namun bedanya sepertinya jauh lebih cepat .
fungsi clicker(a,b) {
if (a.style.display ==') {
a.style.display = 'tidak ada';
b.src='usm.gif'
}
else {
a.style.display=' ;
b.src='dsmh.gif';
}
}
Produk & Layanan
onclick="window.event.cancelBubble = true;">
Dalam kode sumber, .NV1 dan .NV2 adalah definisi font CSS, dan fungsi clicker mengontrol tampilan dan penyembunyian item menu. Variabel a mengontrol teks, dan variabel b mengontrol gambar (tidak ditampilkan dalam gambar karena pengunduhan tidak lengkap). Dalam penerapan sebenarnya, harap perhatikan cakupan yang ditentukan oleh div dan jangan sembunyikan item menu utama lainnya saat mengklik.
Metode implementasi Microsoft relatif cerdas, cepat, relatif mudah dibuat, dan hanya memerlukan satu halaman. Kekurangannya adalah membutuhkan setidaknya dukungan IE 4.0 atau NN 4.0 atau lebih tinggi.
Kedua metode tersebut memiliki kelebihan dan kekurangan masing-masing. Yang mana yang Anda pilih bergantung pada sifat beranda dan dukungan browser Anda.
* Perubahan warna teks
Ini adalah teknologi paling umum di Web. Saat mouse Anda bergerak di atas suatu elemen, elemen tersebut segera berubah warna dan terkadang mengeluarkan suara, seperti perangkat lunak pendidikan multimedia. Jika Anda memadukan warna dengan baik, halamannya akan sangat enak dipandang.
Ada banyak cara untuk mengubah warna teks. Di sini kami hanya memperkenalkan dua di antaranya secara singkat.
Cara pertama adalah dengan menggunakan teknologi CSS. Saat ini, hanya IE 4.0 yang mendukung teknologi ini. Contoh kodenya adalah sebagai berikut.
Ini adalah contoh paling sederhana penggunaan teknologi CSS untuk mengontrol warna teks.
Dalam contoh ini, teks tautan awalnya ditampilkan dalam warna merah, berubah menjadi biru ketika mouse bergerak di atas teks, berubah menjadi magenta ketika diklik untuk mengakses, dan berubah menjadi merah marun setelah mengakses. Karena Netscape belum mendukung atribut CSS seperti tautan, dikunjungi, dan arahkan kursor, Anda tidak akan dapat melihat efek ini jika menggunakan Communicator.
Metode kedua adalah menggunakan JavaScript untuk menulis program skrip kecil untuk dijalankan, sehingga mencapai tujuan perubahan warna. Contoh kodenya adalah sebagai berikut.