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
