BAB III PEMBAHASAN
Pada bab ini akan dibahas bagaimana merancang dan membangun sebuah website yang menampilkan Informasi tentang Film yang sedang dan akan beredar, Informasi tentang buku baru yang terbit dan Info album musik yang baru beredar. Dalam pembuatan web ini lebih banyak berkerja dengan aplikasi Macromedia Dreamweaver MX ditambah aplikasi lain.
Macromedia Dreamweaver MX merupakan program aplikasi generator HTML yang didalamnya terdapat fasilitas yang memudahkan dalam membangun atau membuat sebuah halaman web. Dalam pembahasan ini akan dibagi menjadi beberapa bagian. Bagian pertama akan menjelaskan struktur navigasi dari website, kedua menjelaskan rancangan tampilan halaman web, dan ketiga menjelaskan proses pembuatan halaman web.
Spesifikasi yang diizinkan
Untuk dapat menjalankan program Macromedia Dreamweaver MX ini minimal komputer harus memiliki spesifikasi sebagai berikut :
Untuk Microsoft Windows:
Processor Intel Pentium II dengan 300 Mhz atau yang lebih tinggi
Sistem Windows 98,Windows 2000,Windows NT,Windows ME,dan Windows XP
Menggunakan browser,seperti Internet Explorer
Minimal 98 MB RAM (Random Access Memory) atau menggunakan 128 MB
RAM yang direkomendasikan
Ruangan yang tersisa dalam Hardisk minimal 275 MB
Minimal monitor 256 warna itu lebih tinggi dengan resolusi 800*600 Pixel atau yang direkomendasikan dengan 1024*768 dengan satu juta warna
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 tersebut. Struktur navigasi website ini adalah struktur navigasi campuran. Sebelum menyusun struktur navigasi website, yang dilakukan adalah mengumpulkan isi-isi yang akan ada dalam website. Melalui struktur navigas website ini, terlihat bagaimana isi dan susunan dari sebuah website secara menyeluruh. Untuk situs web ini maka isi yang ada antara lain: Index, Info Buku, Info Musik, Now Playing, Coming Soon, More, Contact Us.
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 akan sangat membantu nantinya, ketika akan membuat rancangan seluruh halaman web. Struktur navigasi website yang baik adalah mampu memberitahukan pengunjung tentang lokasi mereka sekarang, lokasi-lokasi yang bisa dikunjungi dari lokasi mereka sekarang.
Dan pada struktur navigasi website ini, terdapat banyak juga link didalamnya , karena penulis menggunakan table dalam pembuatan web ini, sehingga pada setiap halamannya terdapat banyak link yang sama juga praktis apabila ingin melihat suatu halaman tertentu tanpa harus ke halaman index dahulu. Juga dengan menggunakan table maka lebih menghemat waktu dalam menelusuri isi dari website tersebut.
Berikut akan ditampilkan struktur navigasi dari halaman-halaman yang ada pada website yang dirancang. (Lihat Gambar 3.1)
Gambar 3.1 Harry Potter Star Wars Harlequin Blue Willow New York Maximum Ride Info Buku Foo Fihgters Edane Maxi Priest Kathrine Jenkins T-Five Info Musik The Island Fantastic Four Mr&Mrs Smith War Of The World
Ungu Violet GIE Now Playing In good Company Angels Apocalypse Cinta Silver Sky High Merchant Of Venice Coming Soon Contact Us INDEX
3.2 Storyboard
Alur cerita merupakan gambaran dan penjelasan secara rinci dari tiap gambar, animasi, suara dan juga text. Alur cerita atau storyboard merupakan langkah yang harus dibuat setelah mendefinisikan elemen-elemen kedalam objek-objek. Bagian-bagian tampilan dalam alur cerita akan disatukan oleh peta penjejakan selama proses mendesign tampilan web tersebut.
Tampilan dalam storyboard dilakukan secara berurutan. Tiap layer diberi penjelasan spefikasi tentang apa saja yang ditampilkan pada layer tersebut. Rancangan storyboard harus disesuaikan dengan struktur navigasi yang telah di buat, sehingga design menjadi terarah.
Rancangan storyboard atau Alur cerita pada web Movies Freak:
3.2.1 INDEX.htm
Index.htm adalah halaman depan dari semua halaman yang ada pada website. Halaman ini juga disebut sebagai halaman pembuka, karena pada saat pertama website dibuka maka halaman inilah yang akan tampil sebelum halaman yang lainnya. Halaman ini juga merupakan main atau index dari halaman-halaman web lainnya yang berada pada link Home.htm tersebut.(lihat gb 3.2)
Halaman Movies Freak mempunyai rancangan tampilan sebagai berikut: MOVIES FREAK HOME INFO BUKU INFO MUSIK NOW PLAYING COMING SOON MORE CONTACT US - NOW PLAYING ---COMING SOON --- ---MORE ---Gb 3.2 Rancangan index GB BUKU GB POSTER FILM GB POSTER FILM GB POSTER FILM GB POSTER FILM
3.2.2 Menu film
Halaman ini memberikan informasi secara rinci tentang tampilan web pada halaman Menu film. Disertai dengan sisnopsis film dan link-link ke halaman lainnya sehingga user dapat langsung melakukan link ke topik yang diinginkan.
MOVIES FREAK HOME INFO BUKU INFO MUSIK NOW PLAYING COMING SOON MORE CONTACT US SIP NO SIS SIPNOSIS NOW PLAYING ---COMING SOON --- ---MORE
Gb 3.3 story board menu film
3.2.3 Menu Buku
Halaman ini memberikan informasi secara rinci tentang tampilan web pada halaman Menu buku. Disertai dengan (sipnosis) buku dan link-link ke halaman lainnya sehingga user dapat langsung melakukan link ke topic yang diinginkan.
MOVIES FREAK HOME INFO BUKU INFO MUSIK NOW PLAYING COMING SOON MORE CONTACT US SIP NO SIS SIP NO SIS NOW PLAYING ---COMING SOON --- ---MORE
---Gb 3.4 storyboard menu buku GB BUKU GB POSTER FILM GB POSTER FILM GB BUKU GB POSTER FILM GB SAMPUL BUKU GB SAMPUL BUKU
3.2.4 Menu music
Halaman ini memberikan informasi secara rinci tentang tampilan web pada halaman Menu Music. Disertai dengan informasi album baru yang baru di release dan link-link ke halaman lainnya sehingga user dapat langsung melakukan link ke topic yang diinginkan. MOVIES FREAK HOME INFO BUKU INFO MUSIK NOW PLAYING COMING SOON MORE CONTACT US NOW PLAYING ---COMING SOON --- ---MORE
---gb 3.5 story board music.
3.2.5 Contact Us
Halaman ini menyajikan informasi segala sesuatu tentang pnulis dan contact person yang berupa e-mail.
MOVIES FREAK HOME INFO BUKU INFO MUSIK NOW PLAYING COMING SOON MORE CONTACT US
Website ini dinuat oleh ARRY,jika anda mempunyai kritik atau saran,kirimkan e-mail anda ke
Gb 3.6 story board contac us
3.3 Proses pembuatan Halaman Web
GB BUKU GB POSTER FILM GB SAMPUL KASET GB SAMPUL KASET GB BUKU GB POSTER FILM
Setelah semua persiapan awal untuk membuat website telah dilaksanakan dengan baik, maka berarti telah siap untuk memulai dan membuat sebuah website Movies Freak dengan menggunakan bahasa Indonesia dengan software web design Macromedia Dreamweaver MX. Berikut ini cara-cara sederhana yang dapat dilakukan untuk membuat website ini :
1. Membuat Folder
Untuk memulai suatu halaman web baru, seperti yang telah dijelaskan diatas, sebaiknya membuat folder khusus untuk menyimpan semua file-file dari sebuah website. Adapun langkah2nya sebagai berikut :
- Bukalah Windows Explorer - Kliklah Drive c,pada harddisk
- Tekanlah menu file > New > Folder.Atau cara ini bisa dilakukan dengan jalan alternative lain dengan mengklik kanan pada tempat kosong di jendela drive c berada.
- Kemudian New > Folder.
Gb 3.7 membuat folder baru (properties)
- Apabila prosedur membuat folder baru benar, maka akan keluar folder dengan nama New Folder,ganti dengan dan berilah nama C:\MOVIES FREAK
2. Membuat Frame
Langkah-langkah membuat Frame - Tekan File pada Menu Baru - Pilih New
- Pilih Frame sets pada general
Gb 3.8 contoh Frame
3.3.1 Mengatur Property Halaman Web
Sebelum memulai mendesain halaman web,terlebih dahulu mengatur property halaman kerja. Property halaman ini akan ikut menentukan bagus tidaknya desain yang akan dihasilkan.
1.Untuk perintah menu Modify-page properties , atau gunakan kombinasi tombol ctrl + j.
2. Akan tampil dialog page properties.
Dalam kotak dialog page properties pada Dreamweaver MX terbagi dalam 5 kategori antara lain :
Pada bagian ini kita dapat mengatur jenis font untuk halaman, menentukan style font, ukuran font, warna untuk font, warna 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 menentukan pemberian garis bawah pada teks link.
c. Headings
Pada kategori Headings, kita dapat menentukan sendiri style yang digunakan untuk naskah kita.
d. Title/enconding
Kita dapat memberikan juduk 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.
3.3.2 Menambahkan Judul Halaman Web
Title digunakan untuk memberikan judul halaman Web. Selain melalui kotak dialog page properties, kita juga dapat memberikan memberikan judul halaman web dengan menggunakan salah satu perintah berikut ini.
a. Pada bagian Document Bar, ketika judul halaman web pada kotak teks Title. b. Pilih menu View-head content sehingga pada lembaran kerja kita akan
ditambahkan satu buah tool bar baru, klik icon yang berada di sudut atas kiri kemudian masukan judul halaman web kita didalam kotak teks Title pada bagian panel properties.
a. Klik kanan lembar kerja dokumen window. Pada daftar menu yang tampil pilih page properties.
b. Pada kotak dialog page properties klilk tombol Browse pada bagian Background Image. Jika kita sudah mengetahui letak file gambar yang ingin kita ambil, kita dapat mengetikan path pada kotak teks background image.
3.3.4 Mengisi Latar Belakang dengan Warna
Pilih Background pada kotak dialog page properties juga dapat diisi warna dengan mengklik tombol dropdown pada bagian background pilih satu warna yang kita suka dengan menggunakan pointer mouse.
3.4 Membuat Situs Lokal
Situs local memiliki pengertian bahwa seluruh site yang digunakan untuk
membangun situs web tersebut berada dalam komputer yang berdiri sendiri. Bisa menempatkannya dalam folder dalam drive lokal.
Dalam Dreamweaver, untuk membuat situs web perlu mendefinisikan situs dengan menggunakan kotak site definition. Pada kotak dialog site definition tersebut diminta untuk menentukan situs yang akan dibuat. Ada dua cara proses pendefinisian, yaitu dengan menggunakan pilihan basic atau advance. Pilihan Basic memberikan kemudahan dalam mempersiapkan situs. Dan pilihan Advance bagi yang sudah paham betul akan konsep yang berlaku pada Dreamweaver MX.
Adapun langkah-langkah untuk mengatur pendefinisian site yang dijalankan pada versi basic adalah sebagai berikut :
1.Pilih perintah Menu Site > Manage Site
Pada tampilan kotak dialog manage site 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 Definition seperti pada gambar 3.9. Pada halaman ini diminta untuk memasukkan nama untuk situs pada kotak teks yang disediakan. Masukkan nama sesuai keinginan.
gb 3.9 Site definition
2. Klik Next untuk masuk pada kotak dialog berikutnya
Pada kotak dialog kedua diminta untuk memilih tipe dokumen. Perhatikan gambar 3.10. Jika memillih No, berarti memilih situs statis tanpa halaman dinamis. Atau, pilih Yes
apabila ingin memilih dokumen dinamis.
3. Klik Next untuk melanjutkan ke langkah berikutnya.
Pilih pilihan pertama, Edit locally, then upload to remote testing server setelah itu di tentukan tempat penyimpanan files pada harddisk dengan mngetikkan folder penyimpanan pada begian kotak teks yang disediakan.
gb 3.11 site definition
4. Selanjutnya tekan tombol Next untuk menuju ke kotak dialog berikutnya
Pada bagian tersebut diminta untuk menentukan web server, maka pilih local/Network.
gb 3.12 site definition
5. Klik Next untuk menuju langkah selanjutnya
Kotak dialog pada gb 3.12 menampilkan ringkasan dari setting yang telah di buat. Klik tombol Done untuk mengakhiri Proses.
gb 3.13 site definition
3.5 Pembahasan Program
Pada tahapan ini berisikan pembahasan cara-cara pembuatan website Movies Freak yang dibuat oleh penulis. Adapun langkah-langkah yang telah dilakukan oleh penulis dalam pembuatan website ini adalah :
I. Mengambil data atau gambar dengan menggunakan Internet II. Membuat struktur Navigasi
III. Merancang dan mendesain elemen gambar situs IV. Membuat isi Informasi website
V. Membuat tabel
Adapun langkah awal dalam pembuatan Menu Utama atau Home Page adalah sebagai berikut :
Pilih menu file pada menu Bar > New,atau bisa juga dengan menggunakan shortcut ctrl + N. Kemudian akan tampak tampilan dari kotak dialog New
gb 3.14 New Document
Pilih Basic Page > HTML > Create
gb 3.15 ruang kerja Dreamweaver
Lalu pilih menu Insert > Image atau ctrl + alt + I
Kemudian masukan gambar yang telah dipilih
Lalu atur besar kecil layer
Lalu pindahkan kursor kearah files. Kemudian buatlah file baru untuk halaman menu utama. Dengan cara klik kanan pada halaman files > New files, ketik “Index.html” kemudian tekan enter.
Lalu klik pada layer sehingga pada bagian properties set table ada gambar kecil layer-layer tersebut.
Lalu pada box properties isikan Link denngan “Index.html”
Gb 3.16 Tampilan index.htm
3.5.1 Membuat Menu Film
Pada dasarnya penulis membuat halaman web yang kesemuanya hampir sama, perbedaannya terletak pada Main Frame dari web tersebut. Main Frame merupakan isi dari page yang diklik atau yang diinginkan. Pada halaman ini menampilkan berbagai berbagai informasi film beserta sipnosisnya.
Gb 3.17 tampilan menu film
3.5.2 Membuat Menu Informasi Buku
Pada dasarnya penulis membuat halaman web yang kesemuanya hampir sama, perbedaannya terletak pada Main Frame dari web tersebut. Main Frame merupakan isi dari dari page yang diklik atau yang diinginkan. Pada halaman ini penulis menampilkan berbagai judul novel yang baru terbit beserta ringkasan dari novel-novel tersebut.
Gb 3.18 tampilan menu buku
3.5.3 Membuat Menu Informasi Musik
Pada dasarnya penulis membuat halaman web yang kesemuanya hampir sama, perbedaannya terletak pada Main Frame dari web tersebut. Main Frame merupakan isi dari dari page yang diklik atau yang diinginkan. Pada halaman ini penulis menampilkan informasi Album New Release.
Gb 3.19 tampilan menu musik.
3.5.4 Membuat Contact Us
Pada dasarnya penulis membuat halaman web yang kesemuanya hampir sama, perbedaannya terletak pada Main Frame dari web tersebut. Main Frame merupakan isi dari dari page yang diklik atau yang diinginkan. Pada halaman ini terdapat sebuah link yang ditunjukkan pada e-mail sang penulis.
3.6 Link
Langkah-langkah membuat link dengan menggunakan teks yang sudah ada I. Buat sebuah teks yang akan digunakan sebagai link
II. Pilih teks tersebut kemudian isikan alamat dalam kotak teks Link pada property Inspaector. Bisa juga dengan menggunakan ikon folder utnuk menentukan alamat tujuan
III. Pada document windows, teks yang dijadikan link akan diberi garis bawah . Untuk membuat link dengan menggunakan teks baru, ikuti langkah-langkah berikut ini
• Tempatkan kursor pada tempat yang ingin diberi sebuah link teks
• Klik tombol pada insert bar kategori common sehingga tampil kotak dialog Hyperlink
• Pada kotak dialog Hyperlink masukan berapa ketentuan berikut :
a) Text : digunakan untuk memasukkan teks yang dijadikan hyperlink
b) Link : digunakan untuk menggunakan path ke target link yang diinginkan
c) Target : digunakan untuk menentukan jendela atau frames yang akan di tuju oleh suatu link
d) Tab index : Suatu nomor yang menyatakan urutan link dalam link-link
e) Title : Digunakan untuk memberi nama pada link yang
dibuat
f) Access key : Digunakan untuk membuat tombol pintas ke link-link yang ada di halaman web.
Uji coba ini dilakukan untuk melihat perkembangan terakhir dari website yang telah dibuat. Uji coba juga dilakukan sebagai sarana evaluasi sehingga dapat diketahui letak kekurangan dan kesalahan yang mungkin terdapat didalamnya.
Untuk pembuatan Website ini ada beberapa hal yang perlu diperhatikan untuk mendapatkan hasil yang sempurna. Hal ini perlu diperhatikan tersebut ialah mengenai spesifikasi teknisi system. Spesifikasi teknisi system yang dimaksud disini adalah perangkat keras dan perangkat lunak yang saling mendukung dan memiliki kemampuan untuk menjalankan website Movies Freak ini.
3.8 Publikasi Website
Setelah halaman Web telah siap, penulis mempublukasikannya ke dalam format WWW agar hasil yang dibuat dapat dipergunakan oleh setiap pengguna jasa Internet. Namun sebelumnya ada beberapa persyaratan yang harus di penuhi, antara lain :
Hyperlink harus sudah terhubung dan tidak rusak.
Tampilan halaman Web sudah sesuai keinginan.
Mengetahui letak direktori pada server Web beserta Provider
Pastikan besar File tidak melewati batas anjuran dari provider.
Penulis memanfaatkan jasa provider dari Geocities, karena server Web ini penulis dapat mempublikasikannya dengan lebih cepat setelah dikirim ke Server Web dibandingkan dengan provider yang lain. Selain itu dari segi ekonomis pem-publikasian Web ini juga tidak memerlukan biaya (gratis). Penulis menetapkan besar file yang akan dikirim sebesar kurang dari 5 MB, karena ukuran tersebut sudah ditetapkan oleh pihak provider jika ingin mempublikasikan sebuah halaman Web secara gratis.
