25
BAB III PEMBAHASAN
3.1
Rancangan Umum Website Website Anatomi Kerangka Tubuh Manusia ini memiliki scene, yaitu scene
halaman pembuka, scene menu / scene anatomi, scene struktur, dan scene galeri. Scene pertama yaitu scene halaman pembuka yang akan dilihat pertama kalinya saat Homepage dijalankan dan tentu saja scene ini berbeda dengan scene lainnya, karena scene ini dirancang untuk menarik perhatian para user. Pada scene ini akan ditampilkan animasi yang menarik . Scene menu atau home berisikan kategori-kategori yang terdapat dalam homepage ini kategori-kategori yang terdapat dalam scene ini yaitu: a. Kategori home atau menu utama b. Kategori struktur di bagi menjadi tiga bagian yaitu Rangka manusia, Bentuk tulang, dan jenis tulang c. Kategori galeri di bagi menjadi tiga bagian yaitu galeri 1, 2, 3 Scene home berisikan mengenai keterangan system kerangka pada tubuh manusia. Scene struktur berisikan mengenai informasi-informasi struktur kerangka pada tubuh manusia bentuk tulang dan jenis tulang. Scene terakhir yaitu scene galeri atau scene foto berisikan image atau foto-foto kerangka pada tubuh manusia yang ditujukan untu memudakan para user mengmbil atau mendownload foto-foto kerangka manusia
3.2
Pengumpulan Data Tahap pengumpulan data merupakan tahap awal yang penting. Data-data yang
berupa gambar yang mengenai pembuatan Website Anatomi Kerangka tubuh Manusia dengan menggunakan Dreamweaver MX 2004 didapat dari media massa dan browsing internet. Gambar tersebut kemudian di scen dengan scener dan diedit dengan print.
26
3.3
Struktur Menu Navigasi dalam suatu aplikasi dalam suatu memegang peranan penting terhadap
keberhasilan aplikasi. Dengan adanya aplikasi yang baik dan mudah di mengerti dan user dapat menelusuri suatu aplikasi dengan nyaman. Dengan penulisan ini penulis menggunakan struktur navigasi linier atau disebut juga se arah.
3.4
Rancangan Tampilan Rancangan tampilan adalah bagian dari program yang berhubungan dengan user,
yaitu segala sesuatu yang muncul pada layar monitor. Oleh sebab itu rancangan tampilan mutlak harus dilakukan dalam pembuatan aplikasi multimedia. Rancangan tampilan bertujuan agar program yang dihasilkan terlihat sederhana dan mudah digunakan. Berikut akan dijelaskan mengenai bentuk rangcangan tampilan dan action script yang ingin penulis representasikan kedalam program yang dibuat.
HOME
RANGKA MANUSIA
BENTUK TULANG MENU UTAMA
STRUKTUR JENIS TULANG
GALLERY 1
GALLERY
GALLERY 2
GALLERY 3
Gambar 3.1 Rancangan tampilan
27
3.4.1. Perencanaan Storyboard Untuk mendesain antar muka biasanya digunakan storyboard yang disusun secara berurutan atau layar demi layar, sehingga dapat mempermudah dalam mendesain web nantinya. Pada storyboard ini selain digambarkan perkiraan dari tampilan akhir yang dininginkan, juga ditulis penjelasan dari spesifikasi tiap layar yang terlihat pada monitor, yang meliputi keterangan tiap tombol, teks, letak dan penjelasan. Satu hal yang perlu diperhatikan dalam membuat storyboard adalah tetap mengikuti struktur navigasi yang telah dibuat, sehingga desain terarah. Berikut ini rangcangan storyboard pada web Anatomi Kerangka Pada Tubuh Manusia :
3.4.2. Menu Utama Menu utama merupakan halaman depan dari semua halaman yang ada pada web site. Halaman ini sebagai halaman pembuka bagi halaman yang lainnya. Gambar Teks Gambar HOME
Gambar
STRUKTUR
Gambar
GALLERY
Gambar
Gambar Teks
Gambar 3.2 Rancangan Menu Utama
3.4.3. Menu Struktur Pada menu struktur ini pengunjung akan diberikan link pilihan menu-menu yang lainnya, dan halaman ini berisi informasi tentang kerangka manusia.
28
Gambar Teks
Gambar
HOME
STRUKTUR
GALLERY
Gambar Gambar Teks
RANGKA MANUSIA BENTUK TULANG JENIS TULANG
Gambar 3.3 Struktur Kerangka Manusia
3.4.4. Menu Gallery Pada menu ini pengunjung akan diberikan link pilihan menu-menu untuk melihat gallery atau gambar yang disajikan. Gambar Teks Gambar HOME
STRUKTUR
Gambar GALLERY
Gambar Teks
GALLERY GALLERY
Gambar 3.4 Gallery
GALLERY
29
3.5.
Proses Pembuatan Halaman Web Setelah semua persiapan awal untuk membuat web site telah dilaksanakan dengan
baik, maka berarti telah siap untuk memulai dan membuat sebuah website Animasi Kerangka Pada Tubuh Manusia dengan software web Design Dreamweaver MX 2004. Berikut ini cara sederhana untuk membuat website ini. 1. Membuat Folder Untuk membuat suatu halaman web baru, seperti yang telah dijelaskan diatas sebaiknya membuat folder khusus untuk menyimpan semua file dari sebuah website. Adapun langkah-langkahnya sebagai berikut : a. Bukalah Windows explorer b. Klik Drive C c. Tekan menu File > New > Folder. Atau dengan cara mengklik kanan pada tempat yang kosong pada drive C berada.
Gambar 3.5. Membuat folder baru d. Apalagi langkah-langkah membuat folder sudah benar, maka akan tampil folder dengan nama New folder, kemudia ganti nama folder tersebut dengan nama Anatomi. 2. Membuat Tabel a. Pastikan anda aktif pada jendela Dreamweaver MX 2004 b. Gunakan Menu Insert > Tabel. c. Selanjutnya akan tampil kotak dialog table, seperti pada gambar 3.6.
30
Gambar 3.6. Kotak Dialog Tabel Keterangan kotak dialog Table : a. Rows, bagian yang digunakan untuk menentukan jumlah baris tabel. b. Columns, bagian yang digunakan untuk menentukan jumlah kolom tabel. c. Width, bagian yang digunakan untuk menentukan ukuran lebar tabel dan satuan ukuran yang akan dipakai, pixel atau persentase. d. Boder, bagian yang digunakan untuk mengatur ketebalan border atau batas tabel. e. Cell Pading, bagian yang digunakan untuk mengatur jarak antara isi sel dengan bagian tepi sel. f. Cell Spacing, bagian yang digunakan untuk menentukan jarak antara sel dalam table. g. None, tanpa menggunakan keterangan. h. Left, menampilkan keterangan teks pada kolom pertama atau pada bagian sebelah kiri. i. Top, menampilkan keterangan teks pada kolom pertama atau pada bagian sebelah atas. j. Both, menampilkan keterangan teks pada kolom dan baris pertama. k. Dan pada bagian Accessbility, dapat memberikan keterangan judul tabel pada kotak dialog teks Caption. Sedangkan untuk perataan teksnya dapat memilih dari daftar yang sudah disediakan pada kotak daftar Align Caption.
3.5.1. Mengatur Property Halaman Web Sebelum memulai mendesain halaman web, terlebih dahulu mengatur property halaman lembar kerja. Properti halaman ini akan ikut menentukan bagus tidaknya desain yang akan dihasilkan.
31
Untuk menampilkan kotak dialog Page Properties, dengan cara : a. pilih perintah menu Modify > Page Properties, atau gunakan kombinasi tombol CTRL + J. b. Akan tampil kotak dialok Page Properties seperti yang tampak pada gambar
Gambar 3.7. Page Properties a. Appearance. Pada bagian ini kita dapat mengatur jenis font untuk halaman, menetukan style font, warna untuk font, warta latar belakang halaman atau menampilkan gambar untuk latar belakang. Selain itu kita juga dapat menentukan margin halaman. b. Link. Kategori kedua adalah link. Pada bagian ini kita dapat menentukan jenis font untuk teks link, ukuran font mengubah warna untuk teks link yang sedang aktif serta untuk pemberian garis bawah pada teks link. c. Heading. Pada kategori Heading, kita dapat menentukan sendiri style yang digunakan untuk naskah kita. d. Title / Encoding. Kita dapat memberikan judul halaman pada bagian title. Bagaimana melakukannya dapat kita pelajari pada bahasan-bahasan selanjutnya. e. Tracing Image. Jika kita menampilkan tampilan gambar sementara pada latar belakang, kita dapat mengaturnya pada bagian ini.
32
3.5.2. Menambahkan Judul Halaman Web. Title digunakan untuk memberikan judul halaman web. Selain melalui kotak dialog Page Properties, anda juga dapat memberikan judul halaman web dengan menggunakan salah satu perintah berikut ini : a. Pada bagian Document Bar, ketik judul halaman web pada kotak teks Title. b. Pilih menu View Head content sehingga pada lembar kerja kita akan ditambahkan satu buah toolbar baru, klik icon yang berada disudut atas kiri kemudian masukkan judul halaman web kita didalam kotak teks title pada bagian panel Properties.
3.5.3. Mengisi Bagian Latar Belakang dengan Gambar Background Image digunakan untuk mengisi bagian latar belakang pada halaman web dengan gambar. Gambar sebagai latar belakang akan dapat memperindah halaman web disamping memberikan kesan elegan. Tipe gambar yang dapat dipergunakan untuk keperluan ini adalah Gambar gif, jpg, dan png. Langkah untuk mengambil gambar dan menggunakan sebagai latar belakang adalah : a. Klik kanan pada lembar kerja dokumen Windows. Pada daftar menu yang tampil pilih Page Properties. b. Pada kotak dialog Page Properties, klik tombol Browser pada bagian Background Image. Jika kita sudah mengetahui letak file gambar yang akan kita ambil, kita dapat mengetikan path pada kotak teks Background Image.
3.5.4. Mengisi Latar Belakang dengan Warna. Pilihan background pada kotak dialog Page Properties juga dapat diisi dengan warna, dengan mengklik tombol dropdown pada bagian Background Color pilih salah satu warna yang kita inginkan.
3.5.5. Menentukan Ukuran Margin Ukuran margin pada lembar kerja Dreamweaver MX 2004 sangatlah berbeda dengan ukuran margin pada program lainnya. Margin yang dapat diatur antara lain : a. Left Magrin, untuk menentukan nilai margin kiri halaman web.
33
b. Top Margin, untuk menentukan nilai margin atas halaman web. c. Right Margin, untuk menentukan nilai margin kanan halaman web. d. Bottom Margin, untuk menentukan niali margin bawah halaman web.
3.5.6. Membuat Link pada Teks. a. Pastikan anda aktif pada jendela Dreamweaver MX 2004. b. Pilih Insert pada menu bar > Hyperlink. Sehingga akan tampil kotak dialog Hyperlink seperti pada gambar 3.8.
Gambar 3.8 kotak dialog Hyperlink Keterangan pada kotak dialog Hyperlink : a. Text, digunakan untuk memasukan teks yang dijadikan hyperlink b. Link, digunakan untuk menentukan path ke target link yang diinginkan. Kita dapat mengetikkan langsung pada kotak teks yang tersedia atau kita mengambilnya pada ikon folder. c. Target, digunakan untuk menentukan jendela atau frame yang akan dituju oleh suatu link. d. Tab Index, suatu nomor yang menyatakan urutan link dalam link-link. e. Title, digunakan untuk memberi nama pada link yang kita buat. f. Access Key, digunakan untuk membuat tombol pintas ke link-link yang ada di halaman web.
3.5.7. Membuat Link dengan Flash Button Flash button memiliki tampilan yang lebih variatif. Kita dapat memilih tombol yang kita inginkan dan kita dapat menentukan nama untuk tombol tersebut.
34
Untuk membuat sebuah tombol flash button, lakukan langkah berikut : a. Pastikan aktif pada jendela Dreamweaver MX 2004. b. Pilih Insert pada menu bar > Media > Flash Button, maka akan tampil seperti pada Gambar 3.9.
Gambar 3.9. Flash Button Kotak keterangan Insert Flash Button : a. Style, beberapa animasi tombol dengan contoh berada pada Sample. b. Button text, teks yang akan menampilkan pada tombol button teks. c. Font, jenis-jenis font yang ada pada Flash Button. d. Size, ukuran font yang kita ingin tampilkan. e. Link, untuk menentukan link yang ingin kita hubungkan dengan mengetikkan alamat link. f. Target, untuk menentukan target frame atau windows. g. Bg Color, untuk menentukan warna tampilan belakang. h. Save as, untuk menentukan file itu tersimpan dimana.
3.6. Membuat Situs Lokal Situs lokal mempunyai pengertian bahwa seluruh file yang digunakan untuk membangun situs web tersebut berada dalam komputer yang berdiri sendiri. Bisa menempatkan dalam folder pada drive lokal. Dalam Dreamweaver, untuk membuat suatu situs web perlu mendefenisikan situs dengan menggunakan kotak Site Defenition. Pada kotak dialog Site Defenition tersebut diminta untuk menentukan situs yang akan dibuat. Ada dua cara proses pendefinisian, yaitu
35
dengan menggunakan pilihan Basic_atau Advance. Pilihan Basic memberikan kemudahan dalam menyiapkan situs. Dan pilihan Advance bagi yang sudah paham betul akan konsep yang berlaku pada Dreamweaver MX 2004. Adapun langkah-langkah untuk mengatur pendefenisian site yang dijalankan pada versi Basic adalah sebagai berikut : 1. Pilih perintah menu site > Manage site
Gambar 3.10. Kotak Dialog Manage Site Pada tampilan kotak dialog Manage Sites dapat melakukan beberapa hal, antara lain New, Edit, Duplicate, Remove, Export dan Import. Untuk membuat situs baru pilih tombol New sehingga akan tampil dua pilihan menu melayang, Site dan FTP & RDS Server. Kemudian tekan tombol Site. Selanjutnya akan tampil kotak dialog Site Defenition seperti pada gambar 3.11. pada halaman ini diminta untuk memasukan nama untuk situs pada kotak teks yang disediakan. Masukan nama sesuai dengan keinginan.
Gambar 3.11. Site Defenition Langkah Pertama
36
2. Klik Next untuk masuk pada kotak dialog berikutnya Pada kotak dialog kedua diminta untuk memilih tipe dokumen. Perhatikan Gambar 3.12. Jika memilih NO, berarti memilih situs statis tanpa halaman dianmis atau, pilih YES apabila ingin memilih halaman dinamis.
Gambar 3.12. Site Defenition Langkah Kedua 3. Klik Next untuk melanjutkan kelangkah berikutnya Pada pilihan pertama, edit local Copies on my machine, then upload to server when ready (recommended). Selain itu tentukan tempat penyimpanan file pada harddisk dengan mengetikan folder penyimpanan pada bagian kotak teks yang tersedia.
Gambar 3.13. Site Defenition Langkah ketiga
37
4. Selanjutnya tekan tombol next untuk menuju kekotak dialog berikutnya. Pada bagian tersebut diminta untuk menentukan web server. Apabila menggunakan situs local dan belum terkoneksi dengan web server, maka pilih Local Network..
Gambar 3.14. Site Defenition Langkah keempat 5. Selanjutnya tekan tombol next untuk menuju kekotak dialog berikutnya. Pada bagian tersebut anda diminta untuk.mengecek ulang penempatan file, pada pilihan Yes, enable check in and check out. Atau No, do not enable check in and check out.
Gambar 3.15. Site Defenition Langkah kelima
38
6. Klik Next menuju langkah selanjutnya. Kotak dialog pada gambar 3.16. menampilkan ringkasan dari seting yang telah dibuat. Klik tombol Done untuk mengakhiri proses.
Gambar 3.16. Site Defenition Langkah keenam
3.7. Pembahasan Program Pada tahap ini berisikan pembahasan cara-cara pembuatan website Anatomi Kerangka Tubuh Manusia yang dibuat penulis. Adapun langkah-langkah yang telah dilakukan oleh penulis dalam pembuatan website ini adalah : 1. Mengambil data atau gambar dari Anatomi Kerangka Tubuh Manusia. 2. Membuat Struktur Navigasi. 3. Merancang dan mendesain elemen gambar situs. 4. Membuat informasi website.
3.7.1. Membuat Menu Utama Adapun langkah awal untuk pembuatan Menu Utama atau Homepage, penulis sebelumnya membuat desain menu utama atau Homepage di program Fireworks MX
39
2004, setelah itu penulis mgeksport ke bentuk HTML yang bisa dijalankan di program Dreamweaver MX 2004. Dengan ini penulis akan menjelaskan cara pembuatanya sebagai berikut : 1. Pilih Menu File pada Menu Bar > New, atau biasa juga dengan menggunakan shortcut Ctrl + N. Kemudian akan tampak tampilan dari kotak dialog New Document seperti pada gambar 3.17.
Gambar 3.17. Kotak Dialog New Document 2. Masukkan ukuran Width, Height dan Resolusion, selain itu pada kanvas color pilih white, klik Ok. 3. Maka muncullah ruang kerja Fireworks MX 2004 seperti pada gambar 3.18.
Gambar 3.18.
40
4. Klik Rectangle tool untuk membuat kotak batas header. 5. Buat sebuah kotak melintang pada bagian atas dokumen. 6. Atur property untuk Rectangle pada panel properties. Isikan nilai pada kotak teks W: 800 untuk mengatur panjang Rectangle, pada kotak teks H: 80 untuk menentukan tinggi Rectangle pada kotak teks X dan Y masing-masing 0 untuk menentukan titik koordinat posisi Rectangle pada dokumen, seperti pada gambar 3.19.
Gambar 3.19 7. Berikan warna pada Rectangle dengan menggunakan warna fill pada panel properties, pilih warna biru tua atau dapat memasukkan nilai #000066. Untuk warna Stroke, biarkan kosong. 8. Agar garis tepi Rectangle tidak tampak kaku saat dilihat di Browser, anda dapat mengatur kelembutan warna tepi drop-down pada bagian Edge > Feather untuk mengatur kelembutan warna tepi Rectangle. Atur kualitas kelembutan warna dengan mengisi nilai 10 pada kotak teks. 9. Klik Menu Drop-down Texture > Line-Horiz 2 untuk memberikan tampilan garis-garis pada Rectangle, atur perentase untuk mengatur kwalitas tekstur. 10. Untuk menambah tampilan grafis yang menarik, dapat menambahkan objek lain di bagian header. Klik Ellipse tool dan seret di dokumen untuk membuat objek lingkaran. 11. Atur Property lingkaran pada panel Properties. Isikan nilai pada kotak teks W: 372 untuk mengtur panjang lingkaran, pada kotak teks H: 92 untuk mengatur tinggi lingkaran. 12. Atur posisi koordinat dari objek lingkaran pada X: -44 dan Y: 36. 13. Klik warna Fiil > warna putih pada pilihan warna, atau isikan nilai #FFFFFF. 14. Klik menu drop-down Edge > untuk mengatur kelembuatan warna tepi. 15. Pilih kedua objek dengan menggunakan kunci keyboard Shift + klik pada objek.
41
16. Pilih menu Modify > combine Path > Puch untuk menggabung kedua objek menjadi satu dan memotong objek yang berada dibawah sesuai lebar dan tinggi objek yang menutupnya. 17. Untuk menambah efek lain pada objek, klik tombol Add Effect pada panel Properties bagian Effect. Pilh perintah menu Bevel dan Emboss > Insert Emboss untuk memberikan effek timbul pada objek, seperti pada gambar 3.17 18. Atur property untuk Widht: 2, Contrast: 75%, Softness: 2, Angel: 315 dan aktifkan kotak centang Show objek untuk menampilkan objek. 19. Klik tombol Add Effect pada panel properties bagian Effect. Pilih perintah menu Shadow and Glow > Drop Shadow untuk memberikan effek bayangan pada objek 20. Atur Property untuk Distance: 7, Opacity: 65%, Sofness: 4, Angel: 315. 21. Untuk membuat logo Kata “/”, klik
Rectangle tool kemudian buat sebuah kotak
dihalaman. 22. Atur ukuran pada panel Properties dengan mengisikan pada kotak teks W: 36, H: 47. Atur pula koordinat peletakan Rectangle pada posisi X : 71 dan posisi Y: 19, berikan warna putih pada Rectangle. 23. Kemudian, gandakan Rectangle tersebut menjadi dua. Pilih Rectangle dan pilih perintah menu Edit > Duplicate atau anda dapat menggunakan Shortcut key Crtl +Shift+D. 24. Selanjutnya, pilih Rectangle hasil duplikasi, lalu pilih perintah menu Modify > Transform > Numeric Transform. Pada kotak dialog yang tampil, pilih Rotate dari daftar pilihan dan isikan nilainya 20 pada kotak teks. 25. Berikan warna putih pada Rectangle yang bolak-balik, kemudian tumpuk Rectangle tersebut menjadi satu. Agar kedua Rectangle tersebut tertata dengan rapih maka kita harus mengatur perataanya. 26. Pilih kedua Rectangle, selanjutnya pilih perintah Modify > Align > Center Horicontal untuk menengahkan kedua Rectangle secara Horicontal. Ulangi sekali lagi perintah diatas.
42
27. Tambahkan tulisan pada bagian Rectangle untuk teks logo. Klik Text tool, tuliskan pada bidang yang tampil “/”,pilih perintah menu Text > Editor, pilih jenis font Brush Scipt Mt, ukuran 52, cetak tebal dan miring. 28. Klik tombol Ok untuk menyetujui pengaturan. Selanjutnya tempatkan teks yang dibuat diatas objek Rectangle. Untuk menyamakan bentuk teks dengan objek Rectangle, pilih perintah menu Modify > Transform > Numeric Transform. 29. Pada kotak dialog Numerik Transform, pilih Rotate kemudian atur sudut gesernya pada kotak teks dengan mengisikan nilai 20 sesuai dengan sudut geser objek Rectangle. 30. tambahkan lagi teks ‘Anatomi’, atur jenis font dan ukuran serta yang lainnya, pilih perintah menu Text > Editor, pilih jenis Font Brush Script Mt, ukuran 32, cetak tebal dan miring. 31. Posisi teks tepat disamping garis “/” yang telah dibuat. 32. Kemudian, gambar lagi dengan warna putih pada bagian sisi sebelah kiri logo dan bagian bawah logo memanjang dari atas ke bawah dengan W: 1, H: 90, kemudian gandakan garis yang dibuat tadi dan atur letaknya disebelah. 33. Klik line tool, gambar garis pertama disisi sebelah bawah logo memanjang dari kanan ke kiri denagn W: 100, H:1, sedangkan garis kedua ditempatkan di bawah garis pertama. 34. Untuk membuat tombol Navigasi, klik Rectangle tool, buat sebuah kotak dengan ukuran W: 96 dan H: 16 tempatkan pada posisi X:303 dan Y: 129, berikan warna abuabu dengan kode hexa #CCCCCC. 35. Berikan effek untuk membuat tampilan tidak terkesan kaku, klik tombol Add Effects pada panel Properties bagian Effects. Pilih perintah menu Bevel and Emboss > Insert Bevel untuk memberikan timbul pada objek. 36. Atur property pada kotak pengaturIner Bevel. Pilih pada pilhan kotak bentuk tepi timbul flat, berrikan lebar efek timbul sebesar 2 untuk kontras, kelembutan efek timbul tetap, sedangkan untuk bentuk bagian Rectangle pilih Raiset untuk tampilan timbul keatas.
43
37. Klik Text tool, ketikan HOME untuk memberikan keterangan pada Rectangle pertama, berikan jenis font Arial dengan ukuran 10 cetak tebal dan rata tengah, anti-aliasing level pilih Strong Anti-aliasing untuk mempertegas teks tersebut. 38. Pilih teks dan Rectangle, dari perintah Menu > Align > Center Vertikal untuk menengahkan keduanya secara Vertical, ulangi sekali lagi perintah diatas, pilih perintah menu Modify > Align > Center Horizontal untuk menengahkan keduanya secara Horizontal. 39. Karena Rectangle tersebut masih berupa tombol biasa, harus dikonfersikan ke symbol agar dapat berfungsi sebagai tombol Navigasi, pilih perintah menu Modify > Symbol > Convert to Symbol atau dapat menggunakan kunci keyboard fungsi F8 untuk menampilkan kotak dialog Symbol Properties. 40. Dalam kotak dialog, isikan pada kotak teks Name: Home dan bagian Type: pilih, Button, klik Ok. 41. Untuk memberikan efek khusus pada tombol, pilih perintah menu Modify > Symbol > Edit Symbol atau dapat juga diklik dua kali pada tombol, selanjutnya tampil sebuah jendela Mode Edit Symbol. 42. Tampak pada jendela Mode Edit Symbol, beberapa tab yang dapat digunakan oleh symbol, antara lain: Up, digunakan untuk menampilkan tombol pada kondisi pertama, yaitu pada saat sebelum mendapatkan aksi pada tombol. Over, digunakan untuk menapilkan tombol pada kondisi kedua, yaitu pada saat pointer mouse melewati tombol. Down, digunakan untuk menampilkan tombol pada kondisi ketiga, yaitu pada saat tombol ditekan. Over While Down, digunakan untuk menampilkan tombol pada kondisi keempat, yaitu pada saat pointer mouse melewati tombol setelah ditekan. Active Area, digunakan untuk menampilkan tombol pada kondisi sebenarnya dan untuk memberikan link pada tombol.
44
43. Tampilan pertama pada saat membuka mode edit berada pada tab Up, selanjutnya klik tab Over untuk beralih ke tab berikutnya, pada tampilan tab Over, terlihat belum ada tombol pada bagian jendela dokumen. 44. Klik tombol Copy UP Graphic untuk menggandakan tombol dari tab Up, pilih Rectangle dan klik Add Effects pada panel properties bagian effects, pilih perintah menu Bevel and Emboss > Inner Bevel untuk memberikan effek timbul pada objek. 45. Atur property pada kotak pengatur Inner Bevel, pilih pada kotak pilihan bentuk tepi timbul Frame 2, berikan lebar efek timbul sebesar 2, bentuk bagian Rectangle pilih Raised untuk tampilan timbul keatas. 46. Klik tab Down untuk beralih ke tab berikutnya, klik tombol Copy Up Graphic untuk menggandakan tombol dari tab Over, ubah tampilan tombol pada tab Down dengan menggunakan panel Properties, pilih Rectangle kemudian ganti warnanya menjadi abuabu cerah (#EEEEEE). 47. Setelah pengturan tombol selesai, dapat di klik tombol Done untuk menjalankan seluruh pengaturan pada tombol dan menutup jendela Mode Edit Symbol. 48. Untuk melihat hasil pengaturan tadi, dapat menjalankan pada jendela Preview dan melihat tiga keadaan dari tombol. 49. Ulangi kembali pembuatan untuk menu ‘Struktur’,’Gallery’, samakan dengan tombol yang pertama. 50. Klik Line tool untuk membuat garis memanjang diatas tombol dan garis di bawah tombol. 51. Masukkan gambar yang akan ditampilakan dengan Widht: 800, Height: 590 dan Align defauld. 52. Setelah itu masukkan teks ‘Sistem rangka adalah suatu sistem organ yang memberikan dukungan fisik pada makhluk hidup. Sistem rangka umumnya dibagi menjadi tiga tipe: eksternal, internal, dan basis cairan (rangka hidrostatik), walaupun sistem rangka hidrostatik dapat pula dikelompokkan secara terpisah dari dua jenis lainnya karena tidak adanya struktur penunjang.Rangka manusia dibentuk dari tulang tunggal atau gabungan (seperti tengkorak ) yang ditunjang oleh struktur lain seperti ligamen, tendon, otot, dan organ lainnya. Rata-rata manusia dewasa memiliki 206 tulang, walaupun
45
jumlah ini dapat bervariasi antara individu. Gerak tubuh pada manusia sebagai akibat kerja sama antara tulang dengan otot. Tulang sebagai gerak pasif nantinya akan menyusun system rangka sendangkan otot sebagai alat gerak aktif. Web ini hadir kehadapan anda sebagai informasi kerangka atau tulang yang perlu anda ketahui.’,dengan font Bradley Hand Ite, dengan ukuran 21. 53. Lalu Save dengan nama Home. 54. Klik File > Export, untuk mengekport file ke bentuk HTML. 55. Pada kotak dialog yang tampil, isikan sesuai ketentuan yang ada. 56. Klik tombol Ok untuk menutuk kotak dialog HTML setup.Klik tombol Save pada kotak dialog Export untuk menjalankan proses penyimpanan file.
Gambar 3.20. Tampilan Menu Utama
3.7.2. Membuat Menu Struktur Pada dasarnya membuat halaman web hamper semuanya sama. Pada halaman ini penulis menampilkan informasi secara rinci tentang struktur tubuh manusia.
46
Gambar 3.21. Tampilan Menu Struktur Tubuh Manusia
3.7.3. Membuat Menu Gallery Pada halaman web ini, penulis membuat perbedaan tampilan pada menu Gallery, di menu ini barulah penulis membuatnya deprogram Dreamwever MX 2004, pada halaman ini pengunjung dapat melihat gambar manusia purba dan lainya hanya dengan memilih salah satu gallery yang ada.
Gambar 3.22. Menu Gallery
47
3.7.4. Menguji Situs Web Menguji situs web bertujuan untuk mengetahui apakah situs yang dibuat dapat diakses oleh umunya dan dapat bekerja sesuai yang diharapkan. Selain itu juga untuk mengetahui apakah link yang dibuat dapat berfungsi dengan betul dan untuk mengetahui kecepatan proses download halaman pada saat dibuka. Untuk melakukan serangkaian uji situs, kita dapat melakukan secara local terlebih dahulu. Hal ini dilakukan agar nanti jika ada suatu kesalahan dalam situs, kita dapat melakukan perbaikan.
3.8.
Perangkat Pendukung Untuk dapat menjalankan program Macromedia Dreamweaver MX 2004 ini
minimal komputer memiliki spesifikasi sebagai berikut : 1. Prosesor intel Pentium II atau lebih, 300 Mhz atau lebih. 2. Windows 98, Windows 2000, Windows NT, Windows ME,dan Windows XP. 3. Netscape Navigator atau Microsoft Inernet Explorer Versi 4 keatas. 4. Minimal 64 MB RAM disarankan 128 MB RAM. 5. Ruangan yang tersisa dalam Harddisk minimal 275 MB. 6. CD-ROM.
