Teknologi Informasi dan Komunikasi Kelas XI SMAMA
165
Bukalah kembali site yang telah Anda buat pada ”Latih Keahlian”
sebelumnya. Pada site tersebut, buatlah halaman utama dan
simpanlah sebagai index.html. Isilah halaman index dengan tabel. Anda bebas menggunakan jumlah kolom dan baris untuk
membuat tabel. Selanjutnya, isilah sel tabel dengan teks dan atau gambar. Simpan baik-baik
file index.html.
7. Menggunakan Layer
Selain table Anda dapat menggunakan layer untuk membangun
halaman website. Layer merupakan objek transparan digunakan untuk
meletakkan teks, gambar, dan objek-objek yang lain. Layer memungkinkan
Anda meletakkan berbagai objek secara bertumpuk. Penggunaan
layer dapat Anda simak pada uraian pembuatan halaman_sains berikut.
a. Halaman index akan disalin dan disimpan sebagai halaman_sains. Caranya, buka halaman index kemudian klik menu
File dan pilihlah Save As. Simpan salinan file dengan nama halaman_sains. Ingat,
jangan menggunakan spasi untuk menyimpan file. Hal ini dilakukan
karena website geocities melarang penggunaan spasi pada nama file.
b. Setelah itu, teks Situs Buatanku diganti dengan teks Halaman Sains.
Jenis, warna, serta ukuran font tidak perlu diubah. Gambar yang terletak
pada sel dua dihapus. Pada sel ke-3, teks Sains diganti
Home,
sedangkan teks Seni tidak diubah.
Sumber: Macromedia Dreamweaver 8
Gambar 5.79 Mengganti teks Situs Buatanku menjadi teks Halaman Sains dan teks
Sains menjadi Home
Bab V Menggunakan Perangkat Lunak untuk Membuat Website
166
c. Sel kedua dipecah menjadi dua kolom. Kolom pertama digunakan untuk menempatkan teks, sedangkan kolom kedua akan digunakan untuk
menempatkan gambar ilustrasi. Kedua kolom diberi warna dengan kode 9900FF.
d. Pada kolom I dimasukkan teks mengenai sejarah bilangan. Agar tampilan
website semakin menarik, artikel akan dilengkapi dengan gambar tulang
Ishango Ishango Bone.
e. Pada kolom kedua akan ditempatkan layer. Layer digunakan untuk
menempatkan gambar. Caranya, aktifkan dahulu mode
Layout
kemudian lakukan klik pada ikon Draw
Layer.
Kursor akan berubah menjadi tanda +. Klik dan
drag sehingga Anda dapat menggambar
layer berbentuk segi empat.
Sumber: Macromedia Dreamweaver 8
Gambar 5.82 Klik ikon Draw Layer
Sumber: Macromedia Dreamweaver 8
Gambar 5.81 Kolom pertama telah berisi teks
Sumber: Macromedia Dreamweaver 8
Gambar 5.80 Memecah sel kedua menjadi dua kolom
Teknologi Informasi dan Komunikasi Kelas XI SMAMA
167
f. Untuk memasukkan gambar, lakukan klik pada ikon
Image. Pilihlah
gambar yang sesuai. Dalam contoh ini akan digunakan gambar tulang Ishango.
g. Lakukan klik OK pada kotak dialog Images Tag Accessibility
Attributes.
Ukuran gambar dapat diperbesar maupun diperkecil menggunakan titik-titik hitam di tepi gambar. Ukuran
layer dapat pula diatur menggunakan cara yang sama.
Sumber: Macromedia Dreamweaver 8
Gambar 5.83 Memilih gambar tulang Ishang_bone
Sumber: Macromedia Dreamweaver 8
Gambar 5.84 Gambar tulang Ishango telah dimasukkan ke dalam layer
Bab V Menggunakan Perangkat Lunak untuk Membuat Website
168 8. Menggunakan
Link
Karena telah memiliki dua halaman, yaitu halaman index dan halaman_sains, sekarang Anda dapat belajar membuat
link. Pada contoh ini, teks akan digunakan sebagai bahan pembuatan
link. a. Buka kembali halaman index.
b. Untuk membuat link menuju halaman_sains, seleksilah teks Sains.
c. Klik ikon Browse for file.
d. Selanjutnya komputer akan menampilkan kotak dialog Select File. Pilih
file yang sesuai, yaitu halaman_sains.html kemudian lakukan klik pada tombol
OK.
Sumber: Macromedia Dreamweaver 8
Gambar 5.86 Kotak Select File
Sumber: Macromedia Dreamweaver 8
Gambar 5.85 Klik Browse for File
Teknologi Informasi dan Komunikasi Kelas XI SMAMA
169
e. Teks Sains akan berubah menjadi teks bergaris bawah. Untuk menguji link, lakukan preview menggunakan Internet Explorer. Sebelum
menampilkan halaman index, komputer akan meminta Anda menyimpan file terlebih dahulu. Jika halaman index telah ditayangkan, lakukan klik
pada link Sains.
f. Beberapa saat kemudian,
Internet Explorer akan menampilkan halaman_sains.
Sumber: Internet Explorer 6.0
Gambar 5.88 Tampilan halaman_sains
Sumber: Internet Explorer 6.0
Gambar 5.87 Klik Link Sains
Bab V Menggunakan Perangkat Lunak untuk Membuat Website
170
Setelah membuat semua halaman, pastikan bahwa semua halaman saling terhubung. Untuk melakukan hal ini periksalah teks
Sains pada
halaman index dan halaman_seni. Periksa juga teks Seni pada halaman index dan halaman_sains. Selain itu periksa juga teks
Home pada
halaman_sains dan halaman_seni. g. Dengan cara yang sama, teks
Home pada halaman_sains juga diubah
menjadi link menuju halaman index. Ingat, pilihlah file index.html saat
komputer menampilkan kotak dialog Select File.
9. Menyiapkan Halaman Seni
Halaman seni disiapkan dengan nama file halaman_seni.html. File ini
dibuat menggunakan cara yang sama dengan cara pembuatan halaman_sains.html. Secara garis besar, langkah pembuatan
halaman_seni.html sebagai berikut. a. Buka halaman_sains.html. Salin
file ini dengan nama halaman_seni.html. Caranya, klik menu
File kemudian pilih Save As.
b. Isi file halaman_seni.html diubah sehingga menjadi tampilan berikut.
Bukalah kembali file index.html. Salin file ini menjadi file misalnya
halaman 2.html. Gunakan layer untuk mengatur tampilan
halaman2.html. Buatlah link pada halaman index dan halaman 2
sehingga dua halaman ini saling terhubung. Simpan baik-baik file-file
Anda. Salin folder, kemudian kumpulkan salinan folder kepada guru
Anda.
Bukalah CD lampiran untuk memperoleh
file-file pendukung tampilan ”Situs Buatanku” alamat
folder : Kelas XI → →
→ →
→ Bab V → →
→ →
→ situs buatanku.
Sumber: Macromedia Dreamweaver 8
Gambar 5.89 Tampilan halaman_sains.html
G a m b a r ditempatkan
dalam frame
Link ke halaman_sains Link ke halaman index
