BAB III ANALISA DAN PEMBAHASAN MASALAH

dokumen-dokumen yang mirip
BAB III PEMBAHASAN 3.1 Struktur Navigasi Website

BAB III ANALISA DAN PEMBAHASAN MASALAH

BAB III ANALISA DAN PEMBAHASAN MASALAH

BAB III ANALISA DAN PEMBAHASAN MASALAH

Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE

Komunikasi Multimedia

BAB III ANALISA DAN PEMBAHASAN

BAB II LANDASAN TEORI

Cara Mengelola Isi Halaman Web

BAB III ANALISA DAN PEMBAHASAN MASALAH

Cara Membuat website dengan Dreamweaver

BAB 4 IMPLEMENTASI DAN EVALUASI

Ruang Kerja DREAMWEAVER MX 2004 :

ADMIN MANUAL AL-QUR AN WEB

BAB IV HASIL DAN PEMBAHASAN

BAB III ANALISA DAN PEMBAHASAN

BAB 4 IMPLEMENTASI DAN EVALUASI. lunak yang digunakan untuk membangun aplikasi perangkat ajar ini adalah : perangkat ajar bisa terlihat lebih menarik.

BAB III ANALISA DAN PEMBAHASAN

PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE

Membuat Bahan Ajar berbasis Web dengan Adobe Dreamweaver CS3. Bambang Adriyanto

BAB 4 IMPLEMENTASI DAN EVALUASI

Gambar 1.1 Desain halaman web

BAB 4 IMPLEMENTASI DAN EVALUASI. Dalam mengimplementasikan sistem yang dijalankan, maka diperlukan beberapa

BAB III PEMBAHASAN. Gambar 3.1 Struktur Navigasi. Index. Penghargaa n

Macromedia Dreamweaver. Tatik Retno Murniasih, S.Si., M.Pd.

BAB III ANALISA MASALAH DAN RANCANGAN PROGRAM

Area kerja. Gambar 1. Tampilan awal MS FrontPage

1. Pengumpulan data dari berbagai sumber seperti: buku, artikel, web blog, dokumen

BAB 4 IMPLEMENTASI DAN EVALUASI. tentang jenis-jenis alat yang digunakan, cara-cara membangun jaringan komputer

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB 4 IMPLEMENTASI DAN EVALUASI. untuk mendukung pembangunan dan implementasi sistem.

BAB IV IMPLEMENTASI DAN PENGUJIAN. dengan 8 gambar di bidang kedua, hanya saja penenpatannya diacak.

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB IV IMPLEMENTASI DAN PENGUJIAN. lingkungan implementasi, pengkodean, dan interface dari aplikasi sistem tersebut.

BAB 5 PROSES EDITING 5.1. EDITING AWAL

BAB III PEMBAHASAN MASALAH

Modul 5 Macromedia Dreamweaver 8

Membuat situs sederhana dengan Dreamweaver *)

BAB 4 IMPLEMENTASI DAN EVALUASI. Keterangan Minimal Disarankan Processor. Intel Pentium III atau sederajat

BAB 4 IMPLEMENTASI DAN EVALUASI. membutuhkan spesifikasi Perangkat Keras (Hardware) dan Perangkat Lunak (Software)

FLASH DASAR-DASAR ANIMASI

Index. Home. About Us. Guest Book. Site. Gambar 3.1 Struktur Navigasi Composite (Campuran)

SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom.

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB IV HASIL DAN PEMBAHASAN

Kata Pengantar.

BAB 4 IMPLEMENTASI DAN EVALUASI. dapat membantu mempermudah perusahaan mitra bisnis dan pencari kerja ( client ) PT.

BAB III ANALISA DAN PEMBAHASAN MASALAH

BAB IV IMPLEMENTASI DAN PENGUJIAN. dilanjutkan dengan pengujian terhadap aplikasi. Kebutuhan perangkat pendukung dalam sistem ini terdiri dari :

MACROMEDIA DIRECTOR. Sumber-sumber:

Gambar Rancangan Layar Halaman Kuis Guru (Langkah Dua)

BAB IV IMPLEMENTASI DAN PENGUJIAN APLIKASI. Sistem pengolahan data merupakan satu kesatuan kegiatan pengolahan

SMP Kristen Tirtamarta hal 1

BAB III PEMBAHASAN MASALAH DAN DESIGN PROGRAM

BAB IV IMPLEMENTASI DAN PENGUJIAN

BAB 4 IMPLEMENTASI DAN EVALUASI Kebutuhan Pengembangan Sistem. mengembangkan sistem pemesanan berbasis web ini terdiri atas kebutuhan

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM. Tahap perancangan dalam pembuatan program merupakan suatu hal yang

BAB III PEMBAHASAN MASALAH

BAB IV HASIL DAN UJI COBA

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB II LANDASAN TEORI

BAB 3 PERANCANGAN SISTEM. 3.1 Mendefenisikan Web dalam Macromedia Dreamweaver 8

BAB 4 IMPLEMENTASI DAN EVALUASI. harus disediakan server, perangkat lunak (software), perangkat keras (hardware)

PRAKTIKUM SISTEM INFORMASI MANAJEMEN


BAB 4 IMPLEMENTASI DAN EVALUASI. Sistem yang telah dianalisis dan dirancang akan digunakan sebagai alat bantu

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB 4 IMPLEMENTASI DAN EVALUASI SISTEM. yang digunakan adalah : 1. Processor Pentium III. 2. Memory 2 GigaByte DDR 2 RAM

Pert 11 DASAR-DASAR WEB DESIGN

BAB IV HASIL DAN PEMBAHASAN

BAB III ANALISA DAN PEMBAHASAN MASALAH

BAB 1 PENDAHULUAN 1.1 Pendahuluan

BAB IV HASIL DAN UJI COBA

BAB 4 IMPLEMENTASI DAN EVALUASI. Perangkat keras yang digunakan untuk membuat aplikasi ini yaitu: 1. Processor Intel(R) Core(TM) Duo 2.

BAB IV IMPLEMENTASI DAN UJI COBA SISTEM. Aplikasi Sistem Penerimaan Karyawan dibuat berbasis web dengan

BAB 4 IMPLEMENTASI DAN EVALUASI. menjalankan program ini adalah : VGA Memory 64 MB

BAB III ANALISIS DAN DESAIN SISTEM

BAB III KONSEP, DESAIN DAN PENGUMPULAN MATERI

BAB III ANALISA DAN PEMBAHASAN MASALAH

BAB IV HASIL & IMPLEMENTASI

BAB IV HASIL DAN UJI COBA

DASAR-DASAR WEB DESIGN

BAB IV HASIL DAN UJI COBA

BAB 4 IMPLEMENTASI DAN EVALUASI. lunak dan personil yang dibutuhkan serta jadwal implementasi sistem tersebut.

BAB III PEMBAHASAN MASALAH

BAB IV HASIL DAN PEMBAHASAN

BAB 4 HASIL DAN PEMBAHASAN

sekolah maupun di lembaga pendidikan menggunakan sistem pembelajaran yang

BAB 4 IMPLEMENTASI DAN EVALUASI. pengunjung yang membutuhkan informasi-informasi yang terdapat di dalam Mal

BAB 4 IMPLEMENTASI DAN EVALUASI

BAB IV IMPLEMENTASI DAN PENGUJIAN. siap untuk dioperasikan. Dalam implementasi pembuatan website Anbiyapedia ini

BAB IV ANALISIS DAN PERANCANGAN SISTEM. utuh ke dalam bagian - bagian komponennya dengan maksud untuk

BAB IV IMPLEMENTASI DAN PENGUJIAN

BAB IV HASIL DAN UJI COBA

BAB III ANALISIS DAN PERANCANGAN MULTIMEDIA. bertujuan untuk mengenalkan alat musik tradisional yang ada di Indonesia.

BAB IV IMPLEMENTASI DAN PENGUJIAN

Insert Bar (Frame) Insert Bar (Form) Insert Bar (Templates) Insert Bar (Characters)

BAB IV IMPLEMENTASI DAN PENGUJIAN

BAB 4 IMPLEMENTASI DAN EVALUASI. kebutuhan yang harus dapat dipenuhi. Kebutuhan yang diperlukan berupa

BAB IV PERANCANGAN DAN IMPLEMENTASI

Transkripsi:

BAB III ANALISA DAN PEMBAHASAN MASALAH Pada bab ini akan dibahas bagaimana cara merancang dan membangun Website Yuni-Museum. Dalam pembuatan website ini, penulis lebih banyak bekerja dengan menggunakan aplikasi Macromedia Dreamweaver MX. Macromedia Dreamweaver merupakan program aplikasi generator HTML yang didalamnya terdapat fasilitas yang memudahkan dalam mendesain dan membangun suatu situs web. Dalam pembahasan ini akan dibagi menjadi beberapa bagian. Bagian pertama akan menjelaskan struktur navigasi dari website, bagian kedua akan menjelaskan rancangan tampilan halaman web, bagian ketiga akan menjelaskan proses pembuatan halaman web, bagian keempat akan menjelaskan upload dari website ini, dan bagian kelima atau terakhir akan menjelaskan hardware dan software yang digunakan. 3.1. Struktur Navigasi Website Struktur Navigasi website digunakan untuk menggambarkan secara garis besar isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara isi-isi dalam website tersebut. Struktur navigasi website ini adalah struktur navigasi hirarki. Melalui struktur navigasi website ini, terlihat bagaimana isi dan susunan dari sebuah website secara menyeluruh. Sebenarnya dengan membuat struktur navigasi ini, sama fungsinya dengan flowchart, yaitu memberikan petunjuk kepada user sehingga user juga bisa menjadikan struktur navigasi ini sebagai pedoman dalam mencari informasi yang ada dalam website ini. Pembuatan struktur navigasi website ini akan sangat membantu nantinya, ketika akan membuat rancangan seluruh halaman web. Struktur navigasi website yang baik adalah mampu memberitahukan pengunjung tentang lokasi mereka 15

16 sekarang dan lokasi-lokasi yang bisa mereka kunjungi dari lokasi mereka sekarang. Gambar 3.1 Struktur navigasi website Yuni-Museum Keterangan : Index : Halaman pembuka pada saat website diakses, memperkenalkan secara singkat tentang apa yang menjadi isi dari keseluruhan website ini. Museum Sejarah Jakarta : Halaman yang berisi penjelasan secara lengkap mengenai Museum Sejarah Jakarta. Museum Wayang : Halaman yang berisi penjelasan secara lengkap mengenai Museum Wayang. Museum Seni Rupa : Halaman yang berisi penjelasan secara lengkap mengenai Museum Seni Rupa. Museum Keramik : Halaman yang berisi penjelasan secara lengkap mengenai Museum Keramik. Museum Bahari: Halaman yang berisi penjelasan secara lengkap mengenai Museum Bahari. Museum Taman Prasasti : Halaman yang berisi penjelasan secara lengkap mengenai Museum Taman Prasasti.

17 Museum Tekstil : Halaman yang berisi penjelasan secara lengkap mengenai Museum Tekstil. Museum Gedung Joang 45 : Halaman yang berisi penjelasan secara lengkap mengenai Museum Gedung Joang 45. Museum M.H. Thamrin : Halaman yang berisi penjelasan secara lengkap mengenai Museum M.H. Thamrin. Contact : Halaman yang berisi mengenai ucapan terima kasih dari penulis dan di halaman ini juga tempat para pengunjung mengirim kritik dan saran melalui e-mail.. 3.2. Desain Antar Muka Antar Muka atau Interface merupakan bagian dari program yang berhubungan atau berinteraksi langsung dengan user. Interface adalah segala sesuatu yang muncul pada layar monitor user. Perancangan interface bertujuan agar program yang dihasilkan tidak terlihat rumit (harus sederhana dan tidak membingungkan), mudah digunakan dan menarik. Hal ini harus dipikirkan perancang program karena setiap interaksi user terhadap aplikasi, pasti harus melalui suatu interface. Untuk merancang interface digunakan storyboard. Storyboard merupakan rancangan kasar dari suatu tampilan layar, atau hanya merupakan gambaran umum saja, contohnya adalah storyboard yang menggambarkan semua elemen yang akan terlihat pada layar monitor user, meliputi teks, gambar, letak dan bentuk tombol, latar belakang yang digunakan, dan sebagainya. Storyboard disusun secara berurutan, layar demi layar. Pada storyboard selain digambarkan rekaan dari tampilan akhir yang diinginkan, tidak lupa juga ditulis penjelasan dan spesifikasi dari setiap layar. Hal yang perlu diperhatikan dalam pembuatan storyboard adalah tidak ada kebingungan dan ketidakjelasan dalam pembuatan program. Dengan demikian setiap tahap dalam merancang menjadi lebih mudah dipahami dan terarah. Selain itu juga jika terjadi suatu kesalahan atau program

18 menjadi tidak sesuai dengan yang diharapkan, mudah untuk dipahami dan ditelusuri untuk mencari penyebab kesalahannya. 3.3. Pembuatan Website Sebelum penulis memulai untuk membuat website, siapkan terlebih dahulu folder lokal yang akan digunakan untuk menampung semua file website yang akan dibuat dan juga untuk memudahkan peng-upload-an file-file ke internet nantinya. Penulis membuat folder lokal di My Documents dengan nama My_Website. Jika sudah ikuti langkah-langkah berikut ini untuk membuat aplikasi Website Yuni-Museum. Berikut ini adalah tampilan desain website Yuni-Museum untuk masingmasing halaman web : 1. Halaman Index Image Animasi Teks LOGO TEKS Teks Berjalan ANIMASI!! MUSEUM!! Sejarah Jakarta Wayang Seni Rupa Keramik Bahari Taman Prasasti Tekstil Gedung Joang 45 M. H. Thamrin Iklan Iklan Click»«Here Tanggal -{{{{{ SELAMAT DATANG }}}}}- ISI FOOTER Gambar 3.2 Rancangan halaman Index.html Untuk membuat halaman index.html, langkah-langkah pembuatannya adalah sebagai berikut :

19 1. Buka dokumen HTML baru dengan mode design view, lalu aturlah properti halamannya sebagai berikut : Left Margin : 0, Top Margin : 0, Margin Width : 0, dan Margin Height : 0. 2. Berikutnya buatlah tabel enam baris satu kolom dengan properti sebagai berikut : Table Width : 800 pixel, Cell Padding : 0, Cell Spacing : 0, Border : 0, dan Align : Center. 3. Pada baris pertama, kedua dan ketiga digunakan untuk Header, baris keempat dan kelima digunakan untuk Menu Navigasi dan Isi, dan baris keenam digunakan untuk Footer. HEADER 4. Pada baris pertama, buatlah sebuah tabel dua baris tiga kolom dengan Cell Spacing : 0, Border : 0, dan Align : Default. 5. Sekarang blok baris pertama sampai dengan kedua kolom pertama, lalu gabungkan kedua baris tersebut dengan mengklik menu Modify >Table > Merge Cells kemudian isilah dengan gambar. 6. Sekarang blok baris pertama sampai dengan kedua kolom kedua, lalu gabungkan kedua baris tersebut dengan mengklik menu Modify >Table > Merge Cells kemudian isilah dengan gambar. 7. Di baris kedua kolom ketiga, buatlah sebuah tabel satu baris tiga kolom dengan properti sebagai berikut : Table Width : 100 percent, Cell Padding : 0, Cell Spacing : 0, Border : 0, dan Align : Right. Di kolom pertama dan ketiga pada background isilah dengan gambar. Lalu di kolom kedua pada background isilah dengan gambar dan ketikkan Yuni- Museum sebagai logo teks. 8. Pada baris kedua, buatlah sebuah tabel tiga baris tiga kolom dengan Cell Spacing : 0, Border : 0, dan Align : Default. 9. Di baris pertama kolom pertama, isilah dengan gambar. Lalu di kolom kedua, pada background isilah dengan gambar dan ketikkan Museum Sejarah Jakarta, Museum Wayang, Museum Seni Rupa, Museum Keramik,

20 Museum Bahari, Museum Taman Prasasti, Museum Tekstil, Museum Gedung Joang 45, Museum M.H. Thamrin dengan menggunakan marquee (teks berjalan). Berikutnya di kolom ketiga, isilah dengan gambar. 10. Di baris kedua kolom pertama sampai ketiga dikosongkan. 11. Di baris ketiga kolom pertama, isilah dengan gambar. Lalu di kolom kedua isilah dengan file animasi flash. Berikutnya di kolom ketiga, isilah dengan gambar. MENU NAVIGASI dan ISI 12. Pada baris keempat, buatlah sebuah tabel satu baris tiga kolom dengan Cell Spacing : 0, Border : 0, dan Align : Default. 13. Di kolom pertama, buatlah sebuah tabel enam belas baris satu kolom. Baris pertama, buatlah sebuah tabel satu baris tiga kolom. Di kolom pertama dan ketiga, isilah dengan gambar. Lalu di kolom kedua pada background isilah dengan gambar dan ketikkan!! Museum!!. Baris kedua di kosongkan. Baris ketiga, buatlah sebuah tabel sembilan belas baris dua kolom dengan properti sebagai berikut : Table Width : 100 percent, Cell Padding : 2, Cell Spacing : 2, Border : 0, dan Align : Default. Di baris pertama sampai sembilan kolom pertama isilah dengan gambar. Di baris pertama sampai sembilan kolom kedua ketikkan nama museum pada setiap barisnya dan berikan link di nama museum tersebut. Baris keempat di kosongkan. Baris kelima isilah dengan file animasi flash. Baris keenam di kosongkan. Baris ketujuh isilah dengan dengan gambar dan berikan link di gambar tersebut. Baris kedelapan di kosongkan. Baris kesembilan isilah dengan gambar dan berikan link di gambar tersebut. Baris kesepuluh isikan dengan gambar. Baris kesebelas dan kedua belas isikan dengan kode Javascript untuk menampilkan tanggal. Baris ketiga belas di kosongkan. Baris keempat belas isilah dengan kode Javascript untuk menampilkan hit counter pengunjung. Baris kelima belas di kosongkan. Baris keenam belas isilah dengan gambar.

21 14. Di kolom kedua di kosongkan. 15. Di kolom ketiga, buatlah sebuah tabel empat belas baris satu kolom. Baris pertama, buatlah sebuah tabel satu baris tiga kolom. Di kolom pertama dan ketiga, isilah dengan gambar. Lalu di kolom kedua pada background isilah dengan gambar dan ketikkan -{{{{{ Selamat Datang }}}}}-. Baris kedua di kosongkan. Baris ketiga, buatlah sebuah tabel satu baris satu kolom lalu ketikkan kata-kata sambutan dan isi keseluruhan. Baris keempat, buatlah sebuah tabel satu baris tiga kolom. Di kolom pertama dan ketiga, isilah dengan gambar. Lalu di kolom kedua pada background isilah dengan gambar. FOOTER 16. Pada baris keenam, buatlah sebuah tabel satu baris tiga kolom dengan Cell Spacing : 0, Border : 0, dan Align : Default. 17. Di kolom pertama dan ketiga isilah dengan gambar. 18. Di kolom kedua, sebuah tabel dua baris satu kolom pada background isilah dengan gambar. Baris pertama ketikkan Copyright 2008 - Yuni Susilowati All rights reserved. Berikutnya baris kedua ketikkan E-mail : Yuni-imoetz@ yahoo.co.id. 19. Selanjutnya simpan dokumen dengan nama Index.html.

22 2. Halaman Museum Sejarah Jakarta Gambar 3.3 Rancangan halaman Museum Sejarah Jakarta.html Untuk membuat halaman Museum Sejarah Jakarta.html, langkah-langkah pembuatannya adalah sebagai berikut : 1. Buka dokumen HTML baru dengan mode design view, lalu aturlah properti halamannya sebagai berikut : Left Margin : 0, Top Margin :0, Margin Width : 0, dan Margin Height : 0. 2. Berikutnya buatlah tabel enam baris satu kolom dengan properti sebagai berikut : Table Width : 800 pixel, Cell Padding : 0, Cell Spacing : 0, Border : 0, dan Align : Center. 3. Pada baris pertama, kedua dan ketiga digunakan untuk Header, baris keempat dan kelima digunakan untuk Isi, dan baris keenam digunakan untuk Footer.

23 HEADER 4. Pada baris pertama, buatlah sebuah tabel dua baris tiga kolom dengan Cell Spacing : 0, Border : 0, dan Align : Default. 5. Sekarang blok baris pertama sampai dengan kedua kolom pertama, lalu gabungkan kedua baris tersebut dengan mengklik menu Modify >Table > Merge Cells kemudian isilah dengan gambar. 6. Di baris pertama sampai dengan kedua kolom kedua, ikuti langkah keempat. Kemudian di kolom ketiga isilah dengan gambar. 7. Di baris kedua kolom ketiga, buatlah sebuah tabel satu baris tiga kolom dengan properti sebagai berikut : Table Width : 100 percent, Cell Padding : 0, Cell Spacing : 0, Border : 0, dan Align : Right. Di kolom pertama pada background isilah dengan gambar. Lalu di kolom kedua pada background isilah dengan gambar dan ketikkan Yuni-Museum sebagai logo teks. Berikutnya di kolom ketiga pada background isilah dengan gambar. 8. Pada baris kedua, buatlah sebuah tabel tiga baris tiga kolom dengan Cell Spacing : 0, Border : 0, dan Align : Default. 9. Di baris pertama kolom pertama, isilah dengan gambar. Lalu di kolom kedua, pada background isilah dengan gambar dan ketikkan Museum Sejarah Jakarta, Museum Wayang, Museum Seni Rupa, Museum Keramik, Museum Bahari, Museum Taman Prasasti, Museum Tekstil, Museum Gedung Joang 45, Museum M.H. Thamrin dengan menggunakan marquee (teks berjalan). Berikutnya di kolom ketiga, isilah dengan gambar. 10. Di baris kedua kolom pertama sampai ketiga dikosongkan. 11. Di baris ketiga kolom pertama, isilah dengan gambar. Lalu di kolom kedua isilah dengan file animasi flash. Berikutnya di kolom ketiga, isilah dengan gambar. 12. Pada baris ketiga di kosongkan.

24 ISI 13. Pada baris keempat, buatlah sebuah tabel empat baris satu kolom dengan Cell Spacing : 0, Border : 0, dan Align : Default. 14. Di baris pertama, buatlah sebuah tabel satu baris tiga kolom. Di kolom pertama dan ketiga isilah dengan gambar. Lalu di kolom kedua pada background isilah dengan gambar dan ketikkan {{{{{ MUSEUM SEJARAH JAKARTA }}}}}- 15. Di baris kedua di kosongkan. 16. Di baris ketiga, buatlah sebuah tabel dua baris satu kolom. Di baris pertama ketikkan isi dari museum sejarah jakarta. Berikutnya di baris kedua, buatlah sebuah tabel dua baris dua kolom dengan properti sebagai berikut : Table Width : 100 percent, Cell Padding : 3, Cell Spacing : 3, Border : 5, dan Align : Default. Di baris pertama kolom pertama isilah dengan gambar. Lalu di baris kedua kolom pertama ketikkan Foto Museum Sejarah Jakarta. Berikutnya blok baris pertama sampai dengan kedua kolom kedua, lalu gabungkan kedua baris tersebut dengan mengklik menu Modify >Table > Merge Cells. Lalu isilah dengan Flash Button dengan mengklik menu Insert > Interactive Images > Flash Button. 17. Di baris keempat, buatlah sebuah tabel satu baris tiga kolom. Di kolom pertama dan ketiga isilah dengan gambar. Di kolom kedua pada background isilah dengan gambar. 18. Pada baris kelima di kosongkan. FOOTER 19. Pada baris keenam, buatlah sebuah tabel satu baris tiga kolom dengan Cell Spacing : 0, Border : 0, dan Align : Default. 20. Di kolom pertama dan ketiga isilah dengan gambar. 21. Di kolom kedua, buatlah sebuah tabel dua baris satu kolom pada background isilah dengan gambar. Baris pertama ketikkan Copyright

25 2008 - Yuni Susilowati All rights reserved. Berikutnya baris kedua ketikkan E-mail : Yuni-imoetz@ yahoo.co.id. 22. Selanjutnya simpan dokumen dengan nama Museum Sejarah Jakarta.html. Untuk membuat halaman museum yang lainnya, langkah-langkah pembuatannya adalah sama dengan halaman Museum Sejarah Jakarta.html. Tetapi isi penjelasan dari tiap halaman berbeda-beda. 3. Halaman Museum Wayang Gambar 3.4 Rancangan halaman Museum Wayang.html

26 4. Halaman Museum Seni Rupa Gambar 3.5 Rancangan halaman Museum Seni Rupa.html 5. Halaman Museum Keramik Gambar 3.6 Rancangan halaman Museum Keramik.html

27 6. Halaman Museum Bahari Gambar 3.7 Rancangan halaman Museum Bahari.html 7. Halaman Museum Taman Prasasti Gambar 3.8 Rancangan halaman Museum Taman Prasasti.html

28 8. Halaman Museum Tekstil Gambar 3.9 Rancangan halaman Museum Tekstil.html 9. Halaman Museum Gedung Joang 45 Gambar 3.10 Rancangan halaman Museum Gedung Joang 45.html

29 10. Halaman Museum M.H. Thamrin Gambar 3.11 Rancangan halaman Museum M.H. Thamrin.html 11. Halaman Contact Gambar 3.12 Rancangan halaman Contact.html

30 Untuk membuat halaman Contact.html, langkah-langkah pembuatannya adalah sebagai berikut : 1. Buka dokumen HTML baru dengan mode design view, lalu aturlah properti halamannya sebagai berikut : Left Margin : 0, Top Margin :0, Margin Width : 0, dan Margin Height : 0. 2. Berikutnya buatlah tabel enam baris satu kolom dengan properti sebagai berikut : Table Width : 800 pixel, Cell Padding : 0, Cell Spacing : 0, Border : 0, dan Align : Center. 3. Pada baris pertama, kedua dan ketiga digunakan untuk Header, baris keempat dan kelima digunakan untuk Isi, dan baris keenam digunakan untuk Footer. HEADER 4. Pada baris pertama, buatlah sebuah tabel dua baris tiga kolom dengan Cell Spacing : 0, dan Border : 0. 5. Sekarang blok baris pertama sampai dengan kedua kolom pertama, lalu gabungkan kedua baris tersebut dengan mengklik menu Modify >Table > Merge Cells kemudian isilah dengan gambar. 6. Di baris pertama sampai dengan kedua kolom kedua, ikuti langkah keempat. Kemudian di kolom ketiga isilah dengan gambar. 7. Di baris kedua kolom ketiga, buatlah sebuah tabel satu baris tiga kolom dengan properti sebagai berikut : Table Width : 100 percent, Cell Padding : 0, Cell Spacing : 0, Border : 0, dan Align : Right. Di kolom pertama pada background isilah dengan gambar. Lalu di kolom kedua pada background isilah dengan gambar dan ketikkan Yuni-Museum sebagai logo teks. Berikutnya di kolom ketiga pada background isilah dengan gambar. 8. Pada baris kedua, buatlah sebuah tabel tiga baris tiga kolom dengan Cell Spacing : 0, dan Border : 0.

31 9. Di baris pertama kolom pertama, isilah dengan gambar. Lalu di kolom kedua, pada background isilah dengan gambar dan ketikkan Museum Sejarah Jakarta, Museum Wayang, Museum Seni Rupa, Museum Keramik, Museum Bahari, Museum Taman Prasasti, Museum Tekstil, Museum Gedung Joang 45, Museum M.H. Thamrin dengan menggunakan marquee (teks berjalan). Berikutnya di kolom ketiga, isilah dengan gambar. 10. Di baris kedua kolom pertama sampai ketiga dikosongkan. 11. Di baris ketiga kolom pertama, isilah dengan gambar. Lalu di kolom kedua isilah dengan file animasi flash. Berikutnya di kolom ketiga, isilah dengan gambar. 12. Pada baris ketiga di kosongkan. ISI 13. Pada baris keempat, buatlah sebuah tabel empat baris satu kolom dengan Cell Spacing : 0, dan Border : 0. 14. Di baris pertama, buatlah sebuah tabel satu baris tiga kolom. Di kolom pertama dan ketiga isilah dengan gambar. Lalu di kolom kedua pada background isilah dengan gambar dan ketikkan {{{{{ TERIMA KASIH }}}}}- 15. Di baris kedua di kosongkan. 16. Di baris ketiga, buatlah sebuah tabel tiga baris satu kolom. Di baris pertama ketikkan ucapan terima kasih. Di baris kedua, buatlah sebuah tabel satu baris dua kolom. Di kolom pertama isilah dengan foto penulis. Lalu di kolom kedua ketikkan biodata penulis. Di baris ketiga, buatlah sebuah tabel satu baris dua kolom. Di baris pertama isilah dengan Flash Button. Di baris kedua ketikkan e-mail untuk mengirimkan kritik dan saran kepada penulis. 17. Di baris keempat, buatlah sebuah tabel satu baris tiga kolom. Di kolom pertama dan ketiga isilah dengan gambar. Di kolom kedua pada background isilah dengan gambar.

32 18. Pada baris kelima di kosongkan. FOOTER 19. Pada baris keenam, buatlah sebuah tabel satu baris tiga kolom dengan Cell Spacing : 0, dan Border : 0. 20. Di kolom pertama dan ketiga isilah dengan gambar. 21. Di kolom kedua, buatlah sebuah tabel dua baris satu kolom pada background isilah dengan gambar. Baris pertama ketikkan Copyright 2008 - Yuni Susilowati All rights reserved. Berikutnya baris kedua ketikkan E-mail : Yuni-imoetz@ yahoo.co.id. 22. Selanjutnya simpan dokumen dengan nama Contact.html. 3.4. Mempublikasikan Website ke Internet Dalam meng-upload web yang nantinya akan muncul di dalam internet, terdapat dua pilihan tempat yaitu tempat yang memberikan domain gratis dan tempat yang memberikan domain dengan membayar. Pada kesempatan ini penulis meng-upload web Yuni-Museum pada tempat yang memberikan domain secara gratis. Berikut ini nama-nama situs yang memberikan domain web secara gratis kepada para pembuat web. www.geocities.com www.brinkster.com www.tripod.com www.ebook.com, dan sebagainya. Dari berbagai macam pilihan situs yang menyediakan tempat untuk domain gratis, penulis menggunakan fasilitas pada situs Geocities.com. Untuk mendapatkan tempat domain secara gratis terlebih dahulu penulis harus mendaftarkan diri ke www.yahoo.com.

33 Karena Geocities.com merupakan salah satu bagian dari Yahoo.com yang menyediakan tempat untuk membuat situs web. Berikut ini adalah tahap untuk meng-upload Website Yuni-Museum : 1. Masukkan login dan password untuk masuk kedalam Geocities.com. 2. Masuk pada halaman Free Web pada bagian kiri web. Pada halaman ini terdapat pilihan-pilihan yang dapat dipilih oleh pengguna web apakah akan memilih web domain yang gratis atau web domain dengan menggunakan biaya Gambar 3.13 Mendaftarkan web gratis 3. Pada halaman ini sign in pada tempat Free Web unutuk mendaftarkan web domain secara gratis.

34 4. Pada langkah selanjutnya kita diberikan pilihan untuk ditampilkan pada web yang akan kita upload. Misalnya pilihan kategori iklan yang akan ditampilkan dan sebagainya. Gambar 3.14 Menu pilihan pada tampilan web yang akan kita buat 5. Halaman berikutnya yaitu pemberitahuan bahwa kita telah siap untuk membangun domain web sendiri.

35 Gambar 3.15 Web yang akan siap upload 6. Langkah selanjunya yaitu file-file apa saja yang akan kita tampilkan atau yang akan kita ikut sertakan dalam web tersebut. Setelah itu tekan tombol upload files untuk memproses web tersebut yang selanjutnya akan siap kita lihat melalui internet. Setelah web telah siap untuk tampil melalui dunia internet, penulis juga memberikan alamat untuk Web Yuni-Museum. Karena alamat yang disediakan oleh Geocities.com yaitu www.geocities.com/yuni-museum. Penulis memilih www.cjb.net untuk memberikan alamat gratis ataupun dengan biaya kepada pembuat web. Pada situs ini penulis hanya mendaftarkan nama yang akan digunakan oleh web tersebut. Lalu secara otomatis cjb.net akan mencari apakah nama alamat web tersebut pernah dibuat. Apabila belum, maka cjb.net akan meminta nama alamat yang sebenarnya dari web yang kita buat. Penulis membuatkan nama web Yuni-Museum menjadi

36 www.yuni-museum.cjb.net. Jadi cara kerja dari cjb.net ini yaitu menjadi alamat perantara yang selanjutnya dari alamat ini akan diproses menuju alamat yang sebenarnya dari alamat tersebut. 3.5. Spesifikasi Hardware dan Software Untuk dapat menjalankan program Macromedia Dreamweaver MX memerlukan sistem hardware (perangkat keras) dan software (perangkat lunak) tertentu supaya dapat berjalan dengan baik. Untuk platform Windows : Processor Intel Pentium II atau yang setara, 300 Mhz atau lebih Microsoft Windows 98, Windows 2000, Windows NT (dengan Service Pack 3 atau lebih), Windows ME, atau Windows XP Netscape Navigator atau Microsoft Internet Explorer versi 4 ke atas 96 MB RAM (disarankan 128 MB) 275 Mb spasi harddisk Monitor 256 warna dengan resolusi 800 x 600 pixel (disarankan monitor dengan jutaan warna dan resolusi 1024 x 768 pixel) Sebuah CD-ROM drive Untuk platform Macintosh : Power Macintosh G3 atau lebih Mac OS 9.1, Mac OS 9.2.1, atau Mac OS X 10.1 atau lebih Mac OS Runtime for Java (MRJ) 2.2 atau di atasnya (diikutkan dalam CD Dreamweaver MX) Netscape Navigator atau Microsoft Internet Explorer versi 4.0 atau lebih 96 MB RAM (disarankan 128 MB) 275 Mb spasi harddisk Monitor 256 warna dengan resolusi 800 x 600 pixel (disarankan monitor dengan jutaan warna dan resolusi 1024 x 768 pixel) Sebuah CD-ROM drive