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.
23
Embed
BAB III PEMBAHASANstorage.jak-stik.ac.id/students/full paper/penulisan ilmiah... · Kategori home atau menu utama b. Kategori struktur di bagi menjadi tiga bagian yaitu Rangka manusia,
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
Gambar 3.1 Rancangan tampilan
MENU UTAMA
HOME
STRUKTUR
GALLERY
RANGKA MANUSIA
BENTUK TULANG
JENIS TULANG
GALLERY 1
GALLERY 2
GALLERY 3
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 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.
Gambar Teks
Gambar
Gambar
Teks
Gambar
Gambar
Gambar
STRUKTURHOME GALLERY
28
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 3.4 Gallery
Gambar Teks
Gambar
HOME STRUKTUR GALLERY
Gambar
Teks
Gambar
GALLERY
GALLERY
GALLERY
Gambar Teks
Gambar
Teks
Gambar
HOME STRUKTUR GALLERY
Gambar
JENIS TULANG
RANGKA MANUSIA
BENTUK TULANG
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