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

CD-ROM

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 FREAKHOME

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 FREAKHOME

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 FREAKHOME

INFO BUKU

INFO MUSIK

NOW PLAYING

COMING SOON

MORE

CONTACT US

SIP

NO

SIS

SIPNOSIS

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 FREAKHOME

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 FREAKHOME

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

ARRYCADHEL@YAHOO.COM

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 :

a. Apperence

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.

3.3.3 Mengisi Bagian Latar Belakang dengan Gambar

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.

gb 3.10 site definition

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

Maka muncullah ruang kerja Dreamweaver MX

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”

Simpan file supaya menhadi halaman pertama

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.

gb 3.20 tampilan contac us

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.

3.7 Uji Coba

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.