Siapa pun dapat memasang foto liburan di situs web mereka, tetapi hanya pembuat web paling keren yang akan mendesainnya sebagai tayangan slide. Dan ini bukan tayangan slide sederhana dengan satu foto dan satu halaman HTML, tetapi tayangan slide yang benar-benar dinamis, dengan setiap gambar diunduh ke halaman HTML yang sama. Kami akan mengajari Anda cara menggunakan Dynamic HTML (DHTML) dan Cascading Style Sheets (CSS) untuk membuat tayangan slide pribadi Anda yang akan membuat teman, keluarga, dan kolega Anda semakin membosankan, oh tidak! Ini lebih mengesankan. Tapi ingat! Karena tayangan slide ini ditulis dalam DHTML, maka hanya dapat dilihat di browser versi 4.0 atau lebih tinggi.
Tentu saja, tayangan slide semacam ini memiliki kegunaan yang serius. Hanya saja kami belum memikirkannya.
langkah pertama
Kumpulkan gambar yang Anda miliki di web dan potong ke ukuran yang sama. Pastikan rentang ukurannya tidak lebih besar dari 640 x 480 piksel, dan pertahankan dimensi piksel yang sama di semua foto - hal ini akan mengganggu secara visual bagi pemirsa jika ukuran foto bervariasi.
Langkah 2
Di tag header Anda, hal pertama yang perlu Anda lakukan adalah menunjukkan bahwa Anda menggunakan CSS di tag
Langkah 3
Selanjutnya, segera tangani detail CSS, atau masukkan JavaScript di tag header. Setelah var numSLides =, atur jumlah slide yang akan ditampilkan (jangan terlalu banyak, karena setiap foto akan menambah jumlah KB yang cukup besar pada halaman). Ada lima foto dalam contoh kita. Berikut kode programnya:
:
pengaturan fungsi() {
if (!document.all) {
dokumen.semua = dokumen;
untuk (i=1;i<=numSlides;i++) dokumen.semua[("gambar"+i)].
style=document.all[("gambar"+i)];
}
beralihSlide(1);
}
fungsi saklarSlide(sDir) {
newSlide = Slide saat ini + sDir;
if (!newSlide) newSlide=numSlide;
if (Slide baru > numSlides) Slide baru=1;
document.all[("image"+newSlide)].style.visibility="terlihat";
document.all[("gambar"+Slide saat ini)].
style.visibility="tersembunyi";
// Jika Anda tidak menginginkan teks deskripsi, hapus baris berikutnya:
dokumen.semua["captions"].document.forCaptions.captionsText.
nilai=captionTxt[Slide baru];
slide saat ini = slide baru;
}
//-->
Perhatikan komentar di dekat akhir kode program: jika Anda tidak memiliki deskripsi, hapus baris di bawahnya.
Langkah 6
Tutup tag header dengan , lalu tempelkan kode program berikut ke bagian badan file HTML halaman web. Perhatikan bahwa kode program mengidentifikasi setiap gambar dengan tag
Langkah 7
Audiens Anda harus mengklik slide dengan kecepatan mereka sendiri, jadi Anda harus memberi mereka sesuatu untuk diklik. . Anda dapat menggunakan hyperlink biasa, namun jauh lebih canggih dengan tombol klik khusus GIF Sebelumnya dan Berikutnya. Contoh kode program menggunakan tabel untuk menghubungkan next.gif dan previous.gif:
Jika Anda tidak ingin menggunakan file GIF untuk tombol klik Sebelumnya dan Berikutnya, ganti tag di atas dengan teks.
Langkah 8
Terakhir, masukkan teks deskripsi yang akan ditampilkan di