Seperti kita ketahui bersama, produksi situs web melibatkan berbagai aspek pengetahuan, termasuk desain grafis, produksi halaman HTML, definisi gaya CSS, skrip sisi klien (JavaScrfipt/VBScript), skrip sisi server (Asp/Asp.Net/PHP/JSP) , dll. konten. Dalam edisi kali ini, penulis memulai dari yang paling dasar, fokus pada cara membuat website HTML sederhana, dan awalnya merasakan kesenangannya.
1. Alat pembuatan halaman web yang digunakan penulis disini adalah Dreamweaver. Pertama jalankan Dreamweaver, pilih menu "File" → "New", dan jendela seperti yang ditunjukkan pada Gambar 1 akan muncul.
2. Ada tujuh pilihan di bawah tab "Basic Page" di jendela ini. Setelah kita memilih item "HTML" dan mengklik tombol "Create", ruang kerja pembuatan akan menjadi kosong, yang berarti halaman HTML telah berhasil dibuat. . Klik pada tampilan kode dan konten yang ditunjukkan pada Gambar 2 akan muncul.
3. Abaikan arti spesifik dari kode halaman HTML yang ditampilkan ini. Pertama-tama kita ubah "Judul Dokumen Tanpa Judul" menjadi "Debut Halaman Web", lalu pilih tampilan desain. Klik "Menu" → "Sisipkan" → "HTML" → "Bingkai" → "Di Atas" untuk menyisipkan bingkai di bagian atas halaman web. Pada saat ini halaman web terbagi menjadi dua frame yaitu frame atas dan frame bawah. Setelah kita memilih frame, pilih perintah "Menu" → "Insert" → "HTML" → "Frame" → "Left", yang menyisipkan frame di sisi kiri halaman web.
4. Klik "Ctrl+S" untuk menyimpan setiap frame (top.htm, left.htm, right.htm). Kemudian pilih bingkai kiri dan klik perintah "Menu" → "Sisipkan" → "Hyperlink", dan kotak dialog seperti yang ditunjukkan pada Gambar 3 akan muncul. Masukkan berbagai item dalam kotak dialog ini, di mana "teks" adalah teks yang ditampilkan dalam tautan, "tautan" adalah alamat halaman yang dituju setelah diklik, dan "target" adalah bingkai di mana teks tersebut ditampilkan. Di sini kita memilih "target" sebagai mainFrame (yaitu frame kiri), dan ikuti langkah ini untuk terus memasukkan hyperlink. Selanjutnya, masukkan kode tampilan bingkai kanan (right.htm) dan masukkan <marquee Direction=left align=middle>Selamat datang di situs web saya!!!</marquee> di <body></body> Efek khusus dapat membuat teks bergerak ke kiri, kanan, atas dan bawah. Mengubah arah ke (ATAS, BAWAH, Kiri, Kanan) dapat mengubah arah pergerakan teks.
5. Sekarang kita telah membuat halaman HTML dengan bingkai, kita akan menambahkan Banner ke bingkai atas (top.htm). Banner dapat melakukan beberapa efek dinamis JavaScript. Kode khusus untuk efek pertukaran dinamis dapat dilihat di kode sumber halaman Top.Htm. Penulis hanya memberikan kode kuncinya di sini:
spandukAD[0]=pic173.gif;
bannerADlink[0]=http://www.sina.com;
spandukAD[1]=pic1732.gif;
bannerADlink[1]=http://www.sohu.com;
Penjelasan kode: Di atas adalah array JavaScript. bannerAD menyimpan gambar, dan bannerADlink menyimpan link setelah mengklik gambar.
6. Lanjutkan membuat halaman untuk hyperlink di bingkai kanan. Konten spesifik dapat disesuaikan sendiri. Pilih menu "File", klik "Baru", pilih HTML untuk membuat rangkaian halaman, dan nama halaman harus sesuai dengan nama yang tertulis saat menyisipkan link. Penulis telah membuat dua contoh (berita terkini dan selebriti populer) di dokumen aslinya, dan pembaca dapat mencoba menambahkan lebih banyak konten sendiri. Dengan cara ini, prototipe situs web HTML dibuat, seperti yang ditunjukkan pada Gambar 4 yang merupakan efek akhir halaman.
Efek dinamis tidak tercermin dalam tangkapan layar. Pembaca dapat langsung membuka Index.htm di file sumber di IE. Setelah dibuka, akan ada prompt. Saat Anda mengklik kanan, menu prompt "Izinkan konten yang diblokir" akan muncul (Gambar 5).
Ringkasan: Dalam edisi ini, kami memperkenalkan cara menggunakan Dreamweaver untuk membuat situs HTML sederhana, yang menggunakan beberapa JavaScript, kerangka HTML, hyperlink, dan teknologi lainnya. Selain itu, permintaan pemblokiran konten yang kami lihat di atas disebabkan karena halaman web belum dipublikasikan ke situs. Di edisi berikutnya, penulis akan menghadirkan konten yang lebih menarik untuk Anda.