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:
<html>
<head>
<title>Contoh menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF ">
<a name="abc"></a><p>
<a href="menu_2.htm#abc"><b>Klik di sini!</b></a>
</body>
</html >
<html>
<head>
<title>Contoh menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="# FFFFFF">
<p><a name="abc"></a></p>
<p><a href="menu_1.htm#abc">
<b>Klik di sini!</b></a > </p>
daftar 1
daftar 2
daftar 3
</tubuh>
</html>
Klik Klik di sini! pada Gambar 1 dan efek Gambar 2 akan muncul. Selama implementasi spesifik, Anda harus memperhatikan definisi dan penggunaan tag <a name=" ">, 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 <a name=" ">, 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 .
<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<title>Selamat datang di Beranda Microsoft</title>
<style TYPE="text/css">
.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;cursor:hand;margin-top:10;text-indent: -14;margin -kiri: 14;}
.NV2 {posisi:relatif;ukuran font:.9em;berat font:normal;}
</style>
</kepala>
<tubuh>
<skrip TYPE="teks/javascript">
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';
}
}
</skrip>
<div CLASS="NV1" ID="BB" onClick="clickker(BB1,BBp);">
<dd><img ID="BBp " SRC="dsmh.gif" ALT="*" ALIGN="MIDDLE" BORDER="0" WIDTH="11" HEIGHT="11">
Produk & Layanan
<div CLASS="NV2" ID="BB1" STYLE ="display:';"
onclick="window.event.cancelBubble = true;">
<a HREF="/products/"><p>Katalog Produk</a>
<a HREF=" http://support.microsoft.com/support/">Dukungan Teknis </a>
<a HREF="/events/">Acara & Seminar</a>
<a HREF="/train_cert/">Pelatihan & Sertifikasi</a>
<a HREF="/referral/sr_default.asp">Rujukan ke Pihak Ketiga</a> </p>
</div>
</dd>
</div>
</body>
</html>
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.
<html>
<head>
<title>Studi tentang dinamika populasi</title>
<style type="text/css">
BODY { background: putih }
A:link { color: red }
A:visited { color: maroon }
A: aktif { warna: fuchsia }
A:hover {warna:biru}
</style>
</head>
<body>
<p> <a href=" www.microsoft.com ">
Ini adalah contoh paling sederhana penggunaan teknologi CSS untuk mengontrol warna teks.</a></p>
</body>
</html>
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.
<html>
<head>
<title>Ubah warna teks</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.css1 { font-family: "Kurir Baru", Kurir, ukuran font: 14pt; gaya font: normal; berat: tebal; warna: biru}
-->
</gaya>
<skrip bahasa="JavaScript">
fungsi MM_changeProp(objStrNS,objStrIE
,theProp,theValue) {
var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE);
(theProp.indexOf("style.") != 0 &&
theObj.style != null))
eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '=" '+theValue+''"');
}
</script>
</head>
<body bgcolor="#FFFFFF">
<span class="css1" ID="x"
onmouseover="MM_changeProp(','document.all [ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color', ' blue','SPAN')">
Ubah warna teks.</span>
</body>
</html>
Karena IE 4.0 dan NN 4.0 memiliki mekanisme kontrol objek yang berbeda, Anda perlu memeriksa browser terlebih dahulu lalu membuat kesepakatan yang sesuai dengan. Fungsi MM_changeProp() mengimplementasikan metode perubahan warna teks ini. Metode ini memerlukan definisi ID dengan span dan menambahkan onmouseover dan onmouseout di mana pun ID tersebut harus diubah, yang jauh lebih merepotkan daripada metode pertama. Oleh karena itu, jika Anda tidak memiliki pendapat yang kuat terhadap Microsoft, lebih baik gunakan cara pertama.
* Tombol Dinamis
Tombol dinamis di sini bukanlah animasi .gif maupun berbagai tombol efek khusus yang disediakan di FrontPage. Saya yakin Anda pasti pernah mengalami situasi ini: ketika mouse Anda bergerak ke atas tombol tertentu, tiba-tiba tombol tersebut bergerak, seolah menggoda Anda untuk mengkliknya. Menarik bukan? Mari kita terapkan di bawah ini.
Pertama-tama, Anda harus menyiapkan dua gambar. Karena ini adalah tombol, ukurannya tidak harus terlalu besar dan warnanya tidak harus terlalu mewah dua gambar agar tidak terlihat setelah dipindahkan. Di bawah ini adalah dua gambar yang saya buat.
Selanjutnya mari kita lihat bagaimana efek dinamis dicapai. Kode sumbernya adalah sebagai berikut.
<html>
<head>
<title>Tombol Tekan</title>
</head>
<body bgcolor=ffffff>
<script>
<!--
versionButton = 1
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion );
jika ( browserVer >= 3)
versionButton = "3";
if (versionButton == "3")
{
toc1on = Gambar baru(42, 197
)
;
Gambar(42, 197);
toc1off.src = "rumah.gif"
;
fungsi img_act(imgName)
{
if (versionButton == "3")
{
imgOn = eval(imgName+
"on.src");
dokumen [imgName].src = imgOn
;
function img_inact(imgName)
{
if (versionButton
== "3")
{
imgOff = eval(imgName + "off.src");
dokumen
[
imgName].src =
imgOff
;
a href=http://www.microsoft.com
onMouseover = "img_act('toc1')"
onMouseout = "img_inact('toc1')"><img src=home.gif
lebar=100 tinggi=50 batas=0 nama ="toc1"></a>
</body>
</html>
Ada dua hal yang perlu diperhatikan:
1. Pastikan untuk memberi nama pada img, lalu terapkan nama ini pada definisi gambar sumber.
2. Perhatikan berbagai simbol pada file sumber, terutama tanda kutip, dan perhatikan juga jalur file gambar sumber, sebaiknya gunakan jalur relatif untuk mencegah situs tidak ditampilkan dengan benar setelah diunggah. Tentunya cara bertukar gambar ini juga memerlukan dukungan browser versi 4.0 ke atas. Jika Anda masih menggunakan browser versi 3.0, segera upgrade!
* Jika diminta,
letakkan mouse pada gambar dan informasi prompt akan muncul, seperti tombol pada banyak perangkat lunak yang memberikan fungsi prompt. Fungsi ini mudah diterapkan dalam pengeditan halaman web. Mari kita lihat efeknya.
Sangat mudah untuk mencapai efek ini, cukup lihat kode sumbernya.
......
<tr>
<td WIDTH="57"><a HREF="who.html" TARGET="utama"
ONMOUSEOVER="img_act('who')"
ONMOUSEOUT="img_inact('who') "><img
SRC="../images/button_who0.gif" NAME="who"
title="Profil pribadi Zhou Huajian" ALT="Siapa saya"
BORDER="0" WIDTH="113" HEIGHT="45 "></a>
<a HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('who')" ONMOUSEOUT="img_inact('who')">
</a></td>< /tr>
...
bagian kode yang digarisbawahi adalah cara melakukannya. Atribut Judul sangat berguna! Ini dapat digunakan di semua elemen kecuali BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, dan TITLE untuk menentukan informasi cepat ketika mouse melewatinya.
Di atas telah kita bahas secara detail beberapa tips dalam proses kompilasi halaman web. Ada banyak halaman yang didesain dengan indah dan berteknologi maju di Web, dan menganalisis kode sumbernya adalah cara yang baik untuk mempelajarinya. Teknologi komputer terus berkembang. Dihadapkan dengan teknologi baru yang datang satu demi satu: DHTML, CSS, XML... kita hanya bisa menghadapi kesulitan, menguasainya, dan menerapkannya pada halaman web kita untuk membuat halaman web kita lebih aktif.
(Biro Pariwisata Tianjin Jixian 301900 Jia Hejing)