BAB I PENDAHULUAN 1.1 Latar Belakang Masalah

BAB I PENDAHULUAN

1.1

Latar Belakang Masalah Dengan semakin berkembangnya teknologi informasi dan semakin ketatnya

persaingan diera globalisasi pada saat ini, maka dituntut kesiapan masing-masing pihak dalam hal ini perusahaan-perusahaan besar maupun kecil untuk dapat bersaing secara sehat dalam mensiasati usahanya agar dapat bertahan diera persaingan global ini. Publikasi suatu perusahaan adalah salah satu cara yang cukup efektif pada saat ini untuk memperkenalkan suatu bentuk usaha kepada konsumen dan masyarakat yang ingin mengenal dan bekerja sama dengan sebuah perusahaan. Mempublikasikan melalui jalur internet pada saat ini merupakan suatu keharusan bagi sebuah perusahaan yang ingin berkembang dan ingin maju. Internet dengan jangkauan yang sangat luas memungkinkan untuk dapat memperkenalkan atau mempublikasikan suatu perusahaan kepada setiap orang diseluruh dunia. Selain itu para pengguna internet selain dapat menikmati jaringan informasi secara bebas mereka juga bisa ikut berpartisipasi dalam jaringan tersebut yaitu dengan cara menyusun dokumen-dokumen yang berhubungan dengan web lalu menampilkan, mempromosikan, menyampaikan informasi atau memperkenalkan dirinya melalui web. Melalui pembuatan dokumen WEB sebuah perusahaan tidak harus mengeluarkan biaya yang berlebihan. Topik yang diambil penulis dalam hal penulisan ini adalah mempromosikan sebuah perusahaan yang bergerak dibidang penyewaan Sound System dan Audio Visual yang ingin lebih mengembangkan usahanya melalui jalur internet. Pada penulisan ilmiah ini penulis membuat program aplikasi dalam internet dengan merancang dan membuat WEB PT.Citra Ramsi Nugraha dengan mempergunakan Macromedia Dreamweaver MX 2004.

1

1.2

Masalah dan Pembatasan Masalah Berdasarkan uraian dalam latar belakang masalah, penulis membatasi

permasalahan hanya dalam pembuatan situs WEB PT.Citra Ramsi Nugraha, dengan menggunakan Software Macromedia Dreamweaver MX 2004. 1.3

Tujuan Penulisan Tujuan dari penulisan ini adalah untuk dapat memperkenalkan kepada

masyarakat luas, khususnya para penyewa Sound System dan Audio Visual melalui media internet di PT.Citra Ramsi Nugraha. 1.4

Metode Penelitian Dalam penulisan ilmiah ini, penulis menggunakan metode penelitian sebagai

berikut : 1.

Studi Pustaka Penulis mempelajari buku-buku yang berhubungan dengan Macromedia Dreamweaver MX 2004 dan referensi-referensi yang diperlukan untuk menyelesaikan penulisan ini.

2.

Wawancara. Wawancara dengan pihak PT.Citra Ramsi Nugraha tentang apa yang akan dipublikasikan. 1.5

Sistematika Penulisan Penulis akan memberikan gambaran singkat mengenai hal-hal yang akan

dibahas dalam penulisan ini, sehingga dapat diperoleh gambaran yang jelas tentang isi dari penulisan ilmiah ini. Adapun gambaran dari penulisan ilmiah ini adalah : BAB I

PENDAHULUAN Pada bab ini penulis menguraikan Latar belakang, Masalah dan Pembatasan masalah, Tujuan Penulisan, Metode Penulisan dan Sistematika penulisan.

2

BAB II LANDASAN TEORI Pada bab ini mengemukakan teori yang mendukung penulis untuk menyelesaikan penulisan ilmiah ini. BAB III PEMBAHASAN Pada bab ini menjelaskan tentang proses design dan pembuatan situs. BAB IV PENUTUP Pada bab ini berisi kesimpulan dari hasil penulisan ilmiah yang dilakukan penulis dan saran-saran yang dapat diberika berdasarkan permasalahan dan kesimpulan yang ada.

3

BAB II LANDASAN TEORI

2.1

Sekilas Tentang Internet. Internet adalah sumber daya informasi yang menjangkau seluruh dunia. Sumber

daya informasi tersebut sangat luas dan sangat besar sehingga tidak ada satu orang, satu organisasi atau suatu negara yang dapat memahami seluruh seluk beluk internet. Asal-usul internet berasal dari jaringan komputer yang dibentuk pada tahun 1970-an. Jaringan komputer tersebut disebut dengan Arpanet, yaitu jaringan komputer yang dibentuk oleh Departemen Pertahanan Amerika Serikat, selanjutnya jaringan komputer diperbaharui, dikembangkan dan sekarang penerusnya menjadi tulang punggung global untuk sumber daya informasi yang disebut Internet. Kegunaan internet diantaranya untuk mendukung bisnis global, akademi dan komunitas yang mewakili pribadi. Kegunaan internet terbagi menjadi 4 fungsi yaitu : 1. Fungsi Komunitas Internet adalah alat komunikasi. Kegunaan yang sangat penting dari internet adalah pertukaran pesan antara manusia dengan electronic mail (e-mail). 2. Fungsi Resource Sharing. Internet menghubungkan komputer dengan fasilitas sharing resources diantara komputer. 3. Fungsi Reseorces Discovery Penuntun untuk mencari file tertentu, dokumen, host atau orang diantara jutaan host. 4. Fungsi Komunitas. Masyarakat memakai internet untuk mendapatkan software gratis untuk mendapatkan software gratis untuk berkomunikasi dengan orang lain menggunakan komputer dan berbagai kebutuhan.

4

2.2

Pengertian Website Website adalah tempat atau halaman yang memiliki data atau informasi yang di

identifikasikan dengan URL. Halaman-halaman dalam website ditulis dengan menggunakan bahasa HTML, yang disimpan pada suatu server. Biasanya suatu website memiliki konsep pemasaran produk atau untuk mempublikasikan suatu organisasi. Dalam membangun sebuah situs website memerlukan rancangan yang matang serta teori-teori yang mendukung dalam mempublikasikan sebuah website. Istilahistilah dalam dunia website akan diuraikan dibawah ini, yaitu : A. URL URL adalah singkatan dari Uniform Resources Locater, yang merupakan alamat untuk mengidentifikasikan suatu dokumen atau sumber daya yang terdapat pada WWW. B. WWW. WWW adalah singkatan dari World Wide Web yang merupakan kumpulan dari data atau informasi yang terdapat pada suatu komputer yang terhubung kejaringan internet. WWW dirancang agar sumber daya atau suatu bentuk website dapat digunakan oleh pengunjung dan pengunjung dapat berpindah dari suatu website kewebsite yang lain. Halaman WWW menggunakan bahasa pemprograman Hyper Text Markup Language (HTML) dan agar dapat berkomunikasi dengan komputer lain menggunakan hyper Text Transfer Protocol (HTTP). Komunikasi ini biasanya melalui internet via Transmission Control Protocol (TCP). C. HTTP. Merupakan suatu protocol yang dapat digunakan untuk mengakses berbagai macam informasi atau dokumen-dokumen dari server yang ditulis dengan menggunakan bahasa pemprograman Hyper Text Markup Language (HTML).

5

D. Active X Active X merupakan suatu standar teknologi yang diperkenalkan oleh Microsoft.

Standart

tersebut

mendukung

pengembangan

kontrol-kontrol

pemprograman yang dapat diintegrasikan dengan mudah kedalam sebuah aplikasi, termasuk suatu aplikasi web. Ada beberapa attribut yang harus diperhatikan didalam Active X, yaitu : 1. Attribut Class ID. Merupakan identitas kelas objek atau biasa disebut juga sebagai pokok dalam pendeklarasiaan komponen Active X. Penggunaan atribut ini sebaiknya didukung oleh attribut code base karena jika kontrol yang dispesifikasikan oleh attribut Class ID tidak ditemukan maka kontrol tersebut akan dicari pada URL yang ditetapkan oleh attribut code base. 2. Attribut ID. Attribut ID merupakan nama dari komponen Active X yang digunakan attribut ini hampir sama dengan attribut name pada control form HTML. 3. Attribute Widht and Height Kedua attribut ini digunakan untuk menentukan ukuran area pada dokumen HTML yang akan menampung komponen active X jika berupa gambar. Jika ukuran kmponen berbeda dengan kedua attribut ini maka ukuran komponen akan menyesuaikan diri hingga te[at dengan ukuran area. 4. Attribut Vspace dan Hspace. Kedua attribut ini merupakan margin vertical dan margin horizontal dari komponen Active X. 5. Attribut Align Atribut Align berfungsi untuk meratakan teks disekeliling komponen yang ada active X.

6

6. Hyper Text Markup Language (HTML) HTML merupakan bahasa pemprograman dalam pembuatan situs web sebagai media penulisan. Bahsa pemprograman HTML dapat menggunakan note pad pada windows atau bisa dengan menggunakan HTML editor. 2.3

Sekilas Tentang Macromedia Dreamweaver MX 2004 Macromedia Dreamweaver adalah sebuah HTML editor professional untuk

mendesain secara visual dan mengelola situs web maupun halaman web. Saat ini terdapat software dari kelompok Macromedia yang banyak digunakan untuk mendesain situs web. Macromedia Dreamweaver 3 merupakan versi lama dari Macromedia Dreamweaver dan merupakan Web Authoring terbaik untuk tahun 2000. Pada tahun 2001, Macromedia meluncurkan Macromedia Dreamweaver 4 yang lebih baik dan lebih canggih lagi. Pada tahun 2002 Macromedia meluncurkan versi baru lagi, yaitu Macromedia Dreamweaver MX. Versi terbaru dari Macromedia Dreamweaver saat ini adalah Macromedia Dreamweaver MX 2004. Pada Dreamweaver MX 2004 terdapat beberapa kemampuan bukan hanya sebagai software untuk desain web saja tetapi juga untuk menyunting kode serta pembuatan aplikasi web dengan menggunakan berbagai bahasa pemprograman web, antara lain JPS, PHP, ASP dan ColdFusion. Dreamweaver merupakan software utama yang digunakan oleh web desainer maupun web programmer guna mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam desain maupun membangun situs web. Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap. Fasilitas penyuntingan secara visual dari Dreamweaver MX 2004 menbuat kita dapat menambah desain dan fungsionalitas halaman web tanpa perlu menulis satu baris kode pun. Kita dapat membuat dan mengedit image dalam Macromedia Firework. Kita juga dapat menanbahkan objek Flash secara langsung dalam Dreamweaver MX 2004.

7

2.3.1 Perbedaan Dreamweaver MX 2004 dengan versi sebelumnya. User interface pada Dreamweaver MX 2004 lebih baik dari pada versi sebelumnya, yaitu Dreamweaver MX. Karena Dreamweaver MX 2004 ada paningkatan kemampuan toolbar, di mana Dreamweaver MX 2004 dapat digunakan untuk memodifikasi toolbar yang sudah ada atau menambahkan fungsi baru. Selain user interface baru, Dreamweaver MX 2004 memiliki kemampuan untuk menyunting kode dengan lebih baik. Dreamweaver MX 2004 juga dapat melakukan print kode pada jendela Code View, selain juga memiliki fasilitas Code Hints yang membantu dalam urusan tag, serta Tag Inspector yang sangat berguna dalam menangani tag HTML. Dreamweaver MX 2004 memiliki panel baru, yaitu panel snippset yang memberikan fasilitas untuk menyunting dan menyimpan blok kode yang sering digunakan. Kemampuan baru Dreamweaver MX 2004 lainnya adalah fasilitas untuk menangani dokumen-dokumen baru seperti XHTML, Ektension Manager yang telah ditingkatkan kemampuannya, kemampuan validasi dan debug di browser, serta fasilitas penanganan aplikasi data base yang sebelumnya hanya terdapat pada Macromedia Dreamweaver MX Ultradev. 2.3.2 Ruang Kerja Dreamweaver MX 2004. Ruang kerja pada Dreamweaver MX 2004 memiliki komponen-komponen yang memberikan fasilitas dan ruang untuk menuangkan kreasi kita dalam bekerja, seperti yang terlihat pada Gambar 2.1. Komponen-komponen yang disediakan oleh ruang kerja Dreamweaver MX 2004 antara lain adalah Insert Bar, Document Toolbar, Document Window, Kelompok Panel, Tag Selector, Property Inspector dan Site panel. Komponen-komponen yang terdapat di dalam ruang kerja Dreamweaver MX 2004 adalah :

8

Insert Bar

Document Document Toolbar

Tag Selector

Window

Panel Group

Property Inspector

Site Panel

9

Gambar 2.1 Ruang Kerja Dreamweaver MX 2004

a.

Document Windows

berfungsi untuk menampilkan dokumen dimana kita

sekarang bekerja.

b.

Insert Bar mengandung tombol-tombol untuk menyisipkan berbagai macam objek seperti image, table dan layer ke dalam dokumen.

c.

Document Toolbar berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari dokument windows.

d.

Kelompok Panel adalah kumpulan panel yang saling berkaitan satu sama lain, yang dikelompokan di bawah satu judul.

e.

Tag Selector berfungsi untuk menampilkan hirarki tag di sekitar pilihan yang aktif pada desain view.

f.

Property Inspector digunakan untuk melihat dan mengubah berbagai property objek atauu teks.

g.

Site panel digunakan untuk mengatur file dan folder yang membentuk situs web anda.

2.3.3 Komponen Ruang Kerja. Di dalam ruang kerja Dreamweaver MX 2004 terdapat beberapa komponen utama yang membentuk suatu ruang kerja. Ruang kerja Dreamweaver MX 2004 ini memberikan kesatuan tampilan antara menu utama, panel, property inspector, serta toolbar. 2.3.3.1 Menu Utama Sistem Menu yang terdapat pada Dreamweaver MX 2004 sangat sederhana dan mudah dipahami karena perintah yang terdapat pada hampir sebagian besar fungsi menu terdapat juga dalam panel. Kita tidak akan menghabiskan waktu dengan

10

perintah yang terdapat pada menu tetapi akan lebih banyak bekerja dengan menggunakan perintah panel. a. Menu File dan Menu Edit Berisi item menu standar untuk menu File dan menu Edit, seperti New, Open, Save All, Cut, Copy, Paste, Undo dan Redo. Menu File terdiri dari beberapa macam perintah untuk menampilkan atau memperlakukan dokumen baru, seperti Preview in Browser dan Print Code. Menu Edit berisi perintah untuk pemilihan, seperti select Parent Tag, serta Find dan Replace. b. Menu View Berisi perintah untuk menampilkan beberapa macam tampilan dari dokumen kita (seperti tampilan Design view dan tampilan code) dan untuk menampilkan dan menyembunyikan beberapa elemen halaman dan tomboltombol Dreamweaver dan toolbar. c. Menu Insert Berisikam alternatif

baris insert untuk menyisipkan obyek di dalam

dokumen. d. Menu Modify Berfungsi untuk melakukan perubahan property pada item atau halaman terpilih. Dengan menggunakan menu ini kita dapat mengedit atribut tag, mengganti table dan elemen table dan bermacam bentuk aksi untuk item library dan template. e. Menu Text Berfungsi untuk mempermudah dalam melakukan format teks. f. Menu Commands Berisi akses ke beberapa perintah, format kode yang sesuai dengan format pilihan kita, membuat photo album dan melakukan pengeditan gambar dengan menggunakan Macromedia Fireworks. g. Menu Site

11

Berisi item menu untuk mengelola situs dan melakukan upload dan download file. h. Menu Window Menyediakan akses ke seluruh panel, inspector dan jendela di dalam Dreamweaver.

i. Menu Help Menyediakan akses ke dokumen Dreamweaver, membuka lembar kerja Help untuk membantu kita dalam menggunakan Dreamweaver dan menyediakan bahan referensi untuk beberapa bahasa. 2.3.3.2 Baris Standar Pada saat kita membuka jendela Dreamweaver MX, secara default hanya menampilkan Document Bar tanpa menampilkan Standar Bar.

Gambar 2.2 Baris Standar Berikut ini fungsi-fungsi tombol perintah yang terdapat di dalam Standard Bar.

a. New, untuk membuat halaman web baru. b. Open, untuk membuka halaman web yang sudah ada. c. Save, untuk menyimpan halaman web yang sedang aktif. d. Save All, untuk menyimpan seluruh halaman web yang sedang di buka.

12

e. Cut, untuk menghapus objek yang terpilih. f. Copy, untuk menyalin objek yang terpiih. g. Paste, untuk menempel atau meletakkan objek hasil salinan. h. Undo, untuk membatalkan perintah yang sedang terakhir kali di lakukan. i. Redo, untuk mengulang kembali perintah yang terakhir yang dibatalkan.

2.3.3.3 Baris Tombol Dokumen Document Toolbar berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari document window. Kita bisa mengatur tampilan Document window dalam bentuk design view atau code view atau kedua-duanya kita juga dapat memberikan judul document window pada bagian title.

Gambar 2.3 Baris Tombol Dokumen Berikut ini fungsi-fungsi tombol perintah yang terdapat di dalam Baris Tombol Dokumen.

a. Show Code View, untuk menampilkan mode pengetikan kode HTML dalam jendela Code View.

b. Show Code dan Design Views, untuk menampilkan jendela Code View dan jendela Design View.

c. Show Design View, untuk menampilkan jendela Design View. Pada tampilan ini apa yang kita lihat akan sama seperti pada jendela browser.

13

d. No Browser Check Errors, untuk melakukan pengecekan kesalahan pada dokumen web.

e. Document Title, untuk memberikan judul pada dokumen web. f. File Management, untuk proses upload dan download file. g. Preview atau Debug in Browser, untuk melihat hasil dalam browser, mencari kesalahan script dalam dokumen dan untuk memasukan browser dalam daftar browser yang di kenali oleh Dreamweaver MX.

h. Refresh Site List, untuk melakukan pembaharuan terhadap daftar isi situs kita.

i. View Options, untuk mengatur pilihan pada tampilan ruang kerja kita. 2.3.3.4 Baris Insert. Baris insert terdiri dari tombol-tombol untuk membuat dan menyisipkan obyek seperti tabel, layer dan gambar. Ketika kita menggulung pointer melewati sebuah tombol, tampil sebuah kotak keterangan dengan menampilkan nama tombol. Tombol-tombol tersebut mengatur beberapa kategori. Kita dapat berganti kategori dengan menekan tombol pada bagian kiri dari insert bar. Kategori tambahan akan kelihatan ketika sebuah dokumen berisi kode server, seperti dokumen ASP atau CFML. Ketika kita mulai menjalankan program Dreamweaver, kategori yang kita tampilkan sama seperti pada waktu kita bekerja terakhir kali.

Gambar 2.4 Baris Insert Baris Insert digunakan untuk mengatur beberapa pilihan sebagai berikut :

14

a. Kategori Common memungkinkan kita untuk membuat dan menyisipkan beberapa penggunaan obyek biasa, seperti gambar dan tabel.

b. Kategori Layout memungkinkan kita untuk menyisipkan tabel, div tag, layer dan frame. Kita juga dapat memilih salah satu dari tiga tampilan tabel : Standard (default), Expanded Tables dan layout. Ketika mode tampilan terpilih, kita dapat menggunakan tombol layout Dreamweaaver: Draw layout cell dan Draw layout table.

c. Kategori Form berisi tombol-tombol untuk membuat form dan menyisipkan elemen form.

d. Kategori Text memungkinkan kita menyisipkan beberapa teks dan daftar format tag, seperti b, em, p, h1 dan u1.

e. Kategori HTML memungkinkan kita untuk menyisipkan tag HTML untuk mistar horizontal, head content, tabel, rame dan script.

f. Kategori Server-code hanya tersedia untuk halaman-halaman yang menggunakan bahasa khusus server, termasuk di dalamnya ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP dan PHP. Selain kategori ini menyediakan obyek-obyek server-code yang dapat kita sisipkan di dalam tampilan code.

g. Kategori Application memungkinkan kita untuk menyisipkan elemen dinamis seperti recorset, repeated region dan record insertion dan update form.

h. Kategori Flash Element memungkinkan kita untuk menyisipkan elemen flash.

i. Kategori Favorites memungkinkan kita untuk mengelompokan dan mengatur tombol-tombol baris insert yang kita gunakan dalam suatu wadah. 2.3.3.5 Jendela Document Documen Window merupakan bagian yang digunakan untuk mendesain halaman situs web. Dalam document window, Kita dapat menyisipkan teks, image

15

seta objek lain yang mendukung pembuatan situs web atau tempat untuk membuat desain web. Tidak seperti pada versi sebelumnya, Dreamweaver MX membuat dokumendokumen yang sedang dibuka dalam jendela yang sama. Jika kita perhatikan untuk dokumen yang terbuka dalam jendela yang sama, akan disimpan dalam tab-tab seperti lembar kerja pada Microsoft Excel. Dengan demikian kita dapat dengan mudah berpindah antar dokumen tanpa harus menutup tampilan jendela yang sudah terbuka, yaitu dengan mengklik tab dokumen yang kita inginkan.

Gambar 2.5 Jendela Document

16

2.3.3.6 Panel Group Panel Group adalah kumpulan panel yang saling satu sama lain yang dikelompokan bersama dibawah satu judul. Kalau kita perhatikan pada bagian panel group, di situ terdapat beberapa panel yang tersusun secara rapi pada bagian sebelah kanan window. Kelompok panel tersebut antara lain : Design, Code, Application, Files dan Answer. Pada setiap bagian dari panel Group terdapar beberapa macam panel lagi, misalnya pada panel group Design berisikan panel HTML Style, CSS Style dan Behaviour. Pada bagian panel group Files terdapat panel Site dan Assets.

Gambar 2.6 Panel Group 2.3.3.7 Files Panel

17

Files Panel merupakan bagian dari panel group file selain panel Assets. Bagian ini berfungsi untuk mengatur file dan folder yang membentuk situs web kita. Panel ini memiliki fungsi lain yang cukup penting karena memungkinkan anda untuk mengatur file-file dari situs web dengan efesien.

Gambar 2.7 Files

Panel

Pada bagian Files Panel ini, Kita dapat melakukan beberapa aktivitas, antara lain manajemen file, melakukan koneksi ke remote server atau testing server, menempatkan file ke server atau menyalin file dari server ke situs local.

18

2.3.3.8 Snippsets Panel Snippset Panel merupakan kode yang sering digunakan dan disisipkan pada dokumen. Kita dapat mengambil kode Snappet built-in yang ada di dalam bagian snippet dengan menentukan terlebih dahulu kode apa yang akan disisipkan ke dalam dokemen. Misalnya, apabila kita ingin membuat sebuah judul beserta menu, maka kita harus memilih Headers, selanjutnya kita bisa menentukan bentuk dari Headers tersebut. Selain Headers, Kita juga bisa menggunkan kode lainnya, seperti footer, layout navigasi, fungsi navigasi, fungsi Java script dan masih banyak lagi.

Gambar 2.8 Snippsets Panel

2.3.3.9 Tag Inspector

19

Tag Inspector merupakan salah satu fasilitas terbaru dari Dreamweaver MX. Dalam tag Inspector kita dapat melihat struktur hirarki tag dan atribut-atribut yang dapat melihat struktur hirarki tag dan atribut-atribut yang dapat ditambahkan atau di edit.

Gambar 2.9 Tag Inspector 2.3.3.10 Tag Selector Tag Selector terdapat pada bagian bawah document window atau pada bagian status bar. Fungsi dari tag Selector adalah untuk menampilkan hirarki tag pada design view yang aktif. Pada saat kita mengaktifkan jendela document window, secara otomatis pada bagian status bar akan muncul indicator < body >.

20

Gambar 2.10 Tag Selector 2.3.3.11 Property Inspector Property Inspector digunakan untuk melihat dan mengubah berbagai property objek dan teks yang dipilih. Setiap objek maupun teks mempunyai property yang berbeda-beda. Misalnya, untuk teks yang terpilih maka property inspector akan menampilkan property teks seperti yang tampak pada Gambar 2.11. Pada bagian property terdapat beberapa pengaturan format untuk jenis font, ukuran font, perataan, dan lain sebagainya. Sedangkan property image akan menampilkan pengaturan ukuran image, nama image, dan sebagainya, seperti terlihat pada Gambar 2.12.

Gambar 2.11 Property Teks

Gambar 2.12 Property Image 2.4

Struktur Dasar Navigasi Penjajakan termasuk struktur terpenting dalam pembuatan suatu website dan

gambarannya harus sudah ada pada tahap perencanaan. Peta penjajakan merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen website dengan memberikan

21

kemudahan menganalisa keinteraktifan seluruh objek dalam website dan bagaimana pengaruh keinteraktifan terhadap pengguna. Peta penjajakan merupakan beberapa ciri khas yang dapat digolongkan menurut kebutuhan akan obyek, kemudahan pemakaian, keinteraktifitasannya dan kemudahan membuatnya yang berpengaruh terhadap waktu pembutan suatu website. Beberapa dasar struktur pembuatan website. 1.

Linier Linier (suatu alur) merupakan struktur yang hanya mempunyai satu

rangkaian cerita yang terurut. Struktur ini menampilkan satu demi satu tampilan layer secara berurut menurut aturannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah suatu halaman sebelumnya atau satu halaman sebelumnya. Pada struktur penjajakan ini tidak diperkenankan adanya percabangan. Biasanya struktur ini digunakan untuk membuat multimedia presentasi karena tidak terlalu menuntut kemampuan tetapi hanya memerlukan keindahan dan kemudahan menampilkan data sebagai informasi.

Gambar 2.13 Struktur Navigasi Linier 2. Struktur

Hierarchical

(bercabang)

merupakan

Hierarchical suatu

struktur

yang

mengandalkan percabangan untuk menampilkan data berdasarkan Kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai master page (halaman utama ke satu), halaman utama ini akan mempunyai halaman percabangan yang dikatakan slave page (halaman pendukung). Jika salah satu halaman pendukung dipilih atau diaktifkan maka tampilan tersebut akan bernama master page (halaman utama ke dua), dan seterusnya. Pada struktur penjajakan ini tidak diperkenankan adanya tampilan linier.

22

3.

Non Linier

Gambar 2.14 Struktur Navigasi Hierarchical

Struktur penjajakan non linier (tidak teratur) merupakan pengembangan dari struktur penjajakan linier. Pada struktur ini diperkenankan membuat penjajakan bercabang. Percabangan yang dibuat pada struktur non linier ini berbeda dengan percabangan pada struktur hierarchi, karena pada percabangan non linier ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada master page dan slave page.

23

Gambar 2.15 Struktur Navigasi Non Linier 4.

Composite Struktur penjajakan Composite ( campuran ) merupakan gabungan dari ke

tiga struktur sebelumnya yaitu linier , non linier dan hierarchi. Struktur penjajakan ini juga bisa disebut struktur penjajakan bebas. Jika suatu tampilan membutuhkan pencabangan , maka dapat dibuat percabangan dan bila dalam percabangan tersebut terdapat suatu tampilan yang sama kedudukannya maka dapat dibuat struktur linier dalam percabangan tersebut. Struktur penjajakan banyak digunakan dalam pembuatan website sebab struktur ini dapat memberikan keinteraksian yang lebih tinggi. Setiap struktur peta penjajakan seperti yang baru di bahas mempunyai fungsi dan tujuan tersendiri, tidak ada yang lebih baik atau lebih buruk. Penggunaan peta penjajakan bergantung kepada kebutuhan dan tujuan dari aplikasi web yang hendak di buat. Semakin sulit pula pembuatan aplikasi web dari peta penjajakan tersebut.

24

Gambar 2.16 Struktur Navigasi Composite

BAB III PEMBAHASAN

3.1 Sekilas Tentang PT.Citra Ramsi Nugraha. PT.Citra Ramsi Nugraha adalah salah satu perusahaan penyedia jasa layanan penyewaan peralatan audio - visual seperti : Multimedia Projector, Plasma Display, LCD Monitor, Screen, Video Shooting dan Sound System di Indonesia. Berdiri sejak tahun 1996 dengan sebuah tekad besar untuk menjadi salah satu pemain utama dalam industri tersebut. Selama sembilan tahun ini PT.Citra Ramsi Nugraha menyediakan jasanya pada berbagai macam acara atau event penting para mitranya mulai dari presentasi, seminar, rapat, training, konferensi, launcing produk, sampai dengan pernikahan. Karena tenaga operasional atau teknisi yang berpengalaman membuat semua acara yang ditangani menjadi sukses dan memuaskan, sehingga menjadikan PT.Citra Ramsi Nugraha kini memiliki banyak mitra yang dipercayai untuk mendukung berbagai macam acara penting mereka. Dengan penguasaan produk dan konsep yang baik, sales rental yang ramah dan kooperatif PT.Citra Ramsi Nugraha dapat hadir sebagai mitra dalam memberikan

25

saran dan konsultasi untuk menentukan perangkat yang sesuai dengan kebutuhan anda sejak dimulainya acara hingga berakhir hingga sukses. Dengan komitmen PT.Citra Ramsi Nugraha yang selalu berorientasi kepada kepuasan pelanggan, PT.Citra Ramsi Nugraha yang selalu mengedepankan pelayanan tidak heran jika banyak perusahaan besar yang selalu mempercayainya sebagai mitra dalam mendukung acaranya seperti : ESQ, PT.Telkom, Pertamina, Telkomsel, Global TV, RCTI, ANTV, Mitsubishi, BNI, Bank Mandiri dan masih banyak lagi perusahaan-perusahaan ataupun Event Organizer yang selalu menjadi mitra usahanya. 3.2

Struktur Organisasi, Fungsi dan Tugas

DIREKTUR

KEUANGAN

STAFF KEUANGAN

MARKETING

STAFF MARKETING Gambar. 3.1 Struktur Organisasi

1.

Direktur.

26

OPERASIONAL

TEKNISI

Fungsinya adalah untuk mengeplai seluruh operasional perusahaan secara langsung. Tugas Direktur yaitu : a. Melaksanakan pimpinan harian dan koordinasi seluruh jajaran perusahaan. b. Menentukan kebijakan perusahaan, keuangan, tata kerja dan kepegawaian. c. Menentukan anggaran belanja dan pendapatan perusahaan. 2.

Keuangan. Fungsinya adalah untuk mengurus segala kegiatan keuangan dalam perusahaan.

Bagian ini dibantu oleh staff keuangan yang bertugas : a. Membuat kwitansi. b. Membuat laporan keuangan. c. Penagihan lewat telepon serta menyelesaikan masalah penagihan. d. Mengurus segala yang berkaitan dengan keuangan dengan pelanggan. 3.

Marketing. Tugasnya yaitu : a. Melaksanakan perkenalan kepada perusahaan-perusahaan baik melalui telepon maupun kunjungan langsung. b. Memberikan penawaran kepada perusahaan-perusahaan baik melalui fak maupun e-mail. c. Negoisasi harga dengan pelanggan.

4.

Operasional. Fungsinya adalah melakukan segala kegiatan operasional perusahaan seperti

pemeliharaan barang perusahaan dan pemasangan barang perusahaan. Tugasnya yaitu ; a. Mendata segala kebutuhan dan peralatan yang dibutuhkan untuk persewaan. b. Mempersiapkan segala kebutuhan dan peralatan yang dibutuhkan. c. Menjaga dan merawat peralatan yang digunakan.

27

3.3 Struktur Navigasi. Struktur navigasi digunakan untuk menggambarkan secara garis besar isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara isi-isi tersebut. Pada penulisan ini, penulis menggunakan struktur navigasi campuran, dikarenakan dapat memberikan interaktif yang lebih tinggi dan sesuai dengan kebutuhan penulis. Sebenarnya dengan menggunakan 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. Pembuatan struktur navigasi akan sangat membantu nantiya, ketika akan membuat rancangan seluruh halaman web. Struktur navigasi website yang baik adalah mampu memberitahukan pengunjung tentang lokasi mereka sekarang, lokasilokasi yang bisa dikunjungi dari lokasi mereka sekarang. Berikut ini tampilan struktur navigasi dari halaman-halaman yang ada pada website yang dirancang.

28

Gambar 3.2 Struktur Navigasi ABOUTS US

CEREMONIAL CONFERENCE ENTERTAINMENT

EVENTS EXHIBITIONS Product Launching SEMINAR MENU UTAMA

PRODUCTS Multimedia Projector PLASMA DISPLAY

SCREEN BUSINESS OPP AUDIO SYSTEM VIDEO SHOOTING

FAQ

29

OTHER

3.4

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 diinginkan, juga di tulis penjelasan dan 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 rancangan storyboard pada web PT.Citra Ramsi Nugraha : 3.4.1

Menu Utama. Menu Utama merupakan halaman depan dari semua halaman yang ada pada

website. Halaman ini sebagai halaman pembuka bagi halaman yang lainnya.

Teks Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

HOME > > Halaman utama Gambar

Teks

Link Hierarchical

Gambar

Link Non Linier

Link Non Linier

Gambar

Gambar

Link Non Linier

Link Non Linier

Gambar Link Non Linier Gambar 3.3 Rancangan Menu Utama 3.4.2 Menu About Us

30

Link Hierarchical

Gambar

Pada menu About Us ini pengunjung akan diberikan link pilihan menu-menu yang lainnya. dan halaman ini berisikan informasi secara rinci tentang Company profile perusahaan, Visi dan Misi perusahaan, Motto perusahaan dan alamat office perusahaan

Teks

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

ABOUT US > > Silahkan hubungi kami. Teks

Gambar

Gambar 3.4 Rancangan About Us 3.4.3 Menu Events Pada menu Events ini pengunjung akan diberikan link pilihan menu-menu yang lainnya, dan halaman ini terdapat pula submenu yang dapat dipilih dapat di-klik salah satu submenu yang ada.

31

Teks Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

EVENTS > > Kebutuhan acara anda.

Link

Teks

Non Linier

Gambar

Gambar 3.5 Rancangan Events 3.4.4 Menu Product Pada menu Product ini ditampilkan berbagai product PT.Citra Ramsi Nugraha. dan terdapat link-link berbagai macam product sehingga user dapat langsung link ke halaman yang diinginkan

Teks Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

PRODUCT > > Product-product kami.

Link Non Linier

Teks

32

Gambar

Gambar 3.6 Rancangan Product 3.4.5 Menu Business Opportunities. Pada menu ini pengunjung ditawarkan kerjasama dengan pihak PT.Citra Ramsi Nugraha sebagai media partner dalam bidang penyewaan Sound System dan Audio Visual.

Teks Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

BUSINESS OPPORTUNITIES.

Teks

Gambar

Gambar 3.7 Rancangan Business Opportunities. 3.4.6 Menu FAQ Pada menu ini pengunjung akan di tampilkan pertanyan dan jawaban yang berkaitan tentang penyewaan barang.

33

Teks Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

Link Hierarchical

FAQ > > Frequently Ask Question.

Teks

Gambar

Gambar 3.8 Rancangan FAQ 3.5 Proses Pembuatan Halaman Web Setelah semua persiapan awal untuk membuat website telah dilaksanakan dengan baik, maka berarti telah siap untuk memulai dan membuat sebuah website PT.Citra Ramsi dengan software web design Macromedia Dreamweaver MX 2004. Berikut ini 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 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.

34

Gambar 3.9 Membuat Folder Baru. d. Apabila langkah-langkah membuat folder sudah benar, maka akan tampil folder dengan nama New Folder, kemudian ganti nama folder tersebut dengan nama Citra (PT.Citra Ramsi Nugraha).

2.

Membuat Tabel

a. Pastikan anda aktif pada jendela Dreamweaver MX 2004 b. Gunakan Menu Insert > Table. c. Selanjutnya akan tampil sebuah kotak dialog Table, seperti pada Gambar 3.10.

35

Gambar 3.10 Kotak Dialog Table Keterangan kotak dialog Table: a. Rows, bagian yang digunakan untuk menentukan jumlah baris table. b. Columns, bagian yang digunakan untuk menentukan jumlah kolom table. c. Width, bagian yang digunakan untuk menentukan ukuran lebar table dan satuan ukuran yang akan dipakai , pixel atau persentase. d. Border, bagian yang digunakan untuk mengatur ketebalan border atau batas table. e. Cell Panding, bagian yang digunakan untuk mengatur jarak antara isi sel dengan batas 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.

36

i. Top, menampilkan keterangan teks pada baris pertama atau pada bagian sebelah kiri. j. Both, menampilkan keterangan teks pada kolom dan baris pertama. k. dan pada bagian Accessbility, dapat memberikan keterangan judul table 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. 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 dialog Page Properties seperti yang tampak pada Gambar 3.11.

Gambar 3.11 Tampilan Page Properties a.

Appearance

Pada bagian ini kita dapat mengatur jenis font untuk halaman, menentukan style font, ukuran font, warna untuk font, warna latar belakang halaman atau

37

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. Heading. Pada kategori Headings, 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. 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 lembaran kerja kita akan ditambahkan satu buah tool bar baru, klik icon yang berada di sudut atas kiri kemudian masukan judul halaman web kita di dalam kotak teks Title pada bagian panel properties. 3.5.3 Mengisi Bagian Latar Belakang dengan Gambar

38

Background Image digunakan untuk mengisi bagian latar belakang pada halaman web dengan Gambar. Gambar sebagai latar belakang akan dapat memperindah halaman web di samping memberikan kesan yang elegan. Tipe Gambar yang dapat dipergunakan untuk keperluan ini adalah Gambar gif, jpg, dan png. Langkah untuk mengambil Gambar dan menggunakannya sebagai latar belakang adalah : a. Klik kanan lembar kerja Document 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 mengetikkan path pada kotak teks Background Image. 3.5.4

Mengisi Latar Belakang dengan Warna. Pilihan background pada kotak dialog Page Properties juga dapat di isi dengan

warna, dengan mengklik tombol dropdown pada bagian Backgroung Color pilih 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 Margin, untuk menentukan nilai margin kiri halaman web. 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 nilai margin bawah halaman web. 3.5.6

Membuat Link pada Teks. a. Pastikan anda aktif pada jendela Dreamweaver MX 2004

39

b. Pilih Insert pada menu bar > Hyperlink. Sehingga akan tampil kotak dialog Hyperlink seperti pada Gambar 3.12

Gambar 3.12 Tampilan Hyperlink Keterangan pada kotak dialog Hyperlink : a. Text, digunakan untuk memasukan teks yang dijadikan hyperlink b. Link, digunakan untuk menentukan path ketarget link yang diinginkan. Kita dapat mengetikan 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. Untuk membuat sebuah tombol flash button , lakukan langkah berikut: a. Pastikan aktif pada jendela Dreamweaver MX 2004

40

b. Pilih Insert pada menu bar > Media > Flash Button, maka akan tampil seperti pada Gambar 3.13

Gambar 3.13 Tampilan Insert Flash Button Kotak keterangan Insert Flash Button : a. Style, beberapa animasi tombol dengan contoh berada pada Sample. b. Button text, teks yang akan ditampilkan pada tombol button teks. c. Font, jenis-jenis font yang ada pada Flash button d. Size, ukuran font yang ingin kita tampilkan. e. Link, untuk menentukan link yang ingin kita hubungkan dengan mengetikan 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

41

Situs lokal mempunyai pengertian bahwa seluruh file yang digunakan untuk membangun situs web tersebut berada dalam komputer yang berdiri sendiri. Bisa menempatkannya dalam folder pada drive lokal. Dalam Dreamweaver, untuk membuat suatu situs web perlu mendefenisikan situs dengan menggunakan kotak Site Defenition. Pada kotak dialog site definition tersebut diminta untuk menentukan situs yang akan dibuat. Ada dua cara proses pendefenisian, yaitu 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 Sites

Gambar 3.14 Tampilan Kotak Dialog Manage Sites 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.15. Pada halaman ini diminta untuk memasukan

42

nama untuk situs pada kotak teks yang disediakan. Maasukan nama sesuai dengan keinginan.

Gambar 3.15 Tampilan Site Defenition 2.

Klik Next untuk masukpada kotak dialog berikutnya Pada kotak dialog kedua diminta untuk memilih tipe dokumen. Perhatikan

Gambar 3.16. Jika memilih NO , berarti memilih situs statis tanpa halaman dinamis atau, pilih Yes apabila ingin memilih halaman dinamis.

43

Gambar 3.16 Tampilan Site Definition 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). Setelah itu tentukan tempat penyimpanan file pada harddisk dengan mengetikkan folder penyimpanan pada bagian kotak teks yang disediakan.

44

Gambar 3.17 Tampilan Site Defenition Langkah Ketiga. 4.

Selanjutnya tekan tombol Next untuk menuju ke kotak dialog berikutnya. Pada

bagian tersebutt diminta untuk menentukan web server. Apabila menggunakan situs local dan belum terkoneksi dengan web server, maka pilih Lokal Network.

Gambar 3.18 Tampilan Site Definition Langkah Keempat.

45

5.

Klik Next untuk menuju langkah selanjutnya. Kotak dialog pada Gambar 3.19 menampilkan ringkasan dari setting yang telah

dibuat. Klik tombol Done untuk mengakhiri proses.

Gambar 3.19 Tampilan Site Defenition Langkah Kelima 3.7 Pembahasan Program Pada tahapan ini berisikan pembahasan cara-cara pembuatan website PT.Citra Ramsi Nugraha yang dibuat oleh penulis. Adapun langkah-langkah yang telah dilakukan oleh penulis dalam pembuatan website ini adalah : 1. Mengambil data atau gambar dari PT.Citra Ramsi Nugraha 2. Membuat struktur navigasi 3. Merancang dan mendesain elemen gambar situs 4. Membuat isi informasi website

46

Adapun langkah awal pembuatan Menu Utama atau Home Page adalah 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.20

Gambar 3.20 New Document 2. Pilih Basic Page > HTML > Create 3.

Maka muncullah ruang kerja Dreamweaver MX 2004 seperti pada Gambar 3.21

47

Gambar 3.21 Ruang Kerja Dreamweaver MX 2004 4.

Kemudian klik Insert pada menu bar > Table, isi dengan 4 baris dan 2 kolom dengan align centre dan border 1.

5. Pada baris pertama, kedua dan ketiga klik Modify pada menu bar > Table > Merge cell. 6. Pada baris pertama isikan teks dengan font Times New Roman, style 10, size 42 pixel, bold, align centre, teks color #000000, background color #999999, Border color of cell #0000FF dengan teks “PT.CITRA RAMSI NUGRAHA”. 7.

Masih berada pada baris pertama tambahkan teks dengan font Times New Roman, style 11, size 18 pixel, bold, align centre, teks color #000000 dengan teks “Projector, Plasma Display, Audio System, Video Shooting, Screen”.

8. Pada baris kedua klik Insert pada menu bar > Media > Flash Button.

48

9.

Pilih style Beveled rect-blue, masukan button teks HOME, pilih font Times New Roman, size 12, Linknya HOME.htm dan save as button1.swf.

10. Pilih style Beveled rect-blue, masukan button teks ABOUT US, pilih font Times

New Roman, size 12, Linknya ABOUT US.htm dan save as

button2..swf. 11. Pilih style Beveled rect-blue, masukan button teks EVENTS, pilih font Times New Roman, size 12, Linknya EVENTS.htm dan save as button3.swf. 12. Pilih style Beveled rect-blue, masukan button teks PRODUCT, pilih font Times New Roman, size 12, Linknya .PRODUCThtm dan save as button4..swf. 13. Pilih style Beveled rect-blue, masukan button teks BUSINESS Opp, pilih font Times New Roman, size 12, Linknya BUSINESS.htm dan save as button5..swf. 14. Pilih style Beveled rect-blue, masukan button teks FAQ, pilih font Times New Roman, size 12, Linknya FAQ.htm dan save as button5.swf. 15. Atur properties sehingga pada baris kedua, ketiga dan keempat background color #CCCCCC dan Border color of cell #0000FF 16. Pada baris ketiga masukan teks HOME > > Halaman utama. dengan font Times New Roman, size 12 pixel, bold, align left dan teks color #FFFFFF. 17. Pada baris keempat kolom kesatu isikan teks sesuai dengan data yang telah ada. dengan Font Times New Roman , size 12 pixel, align left, bold dan text color #000000. 18. Pada baris keempat kolom kedua pilih Insert pada menu bar > Table. Isi dengan 3 kolom dan 3 baris. 19. Pada baris pertama kolom pertama pilih Insert > Image. Lalu masukan gambar yang

akan ditampilkan dengan width 180, height 160 dan align

default. 20. Masukan Link teks dengan font Times New Roman, style 8, size 14 pixel, pilih bold dan link menuju PRO PLASMA.htm dengan teks PLASMA.

49

21. Pada baris pertama kolom kedua pilih Insert > Image. Lalu masukan gambar yang akan ditampilkan dengan width 180, height 160 dan align default. 22. Masukan Link teks dengan font Times New Roman, style 8, size 14 pixel, pilih bold dan link menuju PRO SCREEN.htm dengan teks SCREEN. 23. Pada baris kedua kolom pertama pilih Insert > Image. Lalu masukan gambar yang akan ditampilkan dengan width 180, height 160 dan align default. 24. Masukan Link teks dengan font Times New Roman, style 8, size 14 pixel, pilih bold dan link menuju PRO AUDIO.htm dengan teks AUDIO SYSTEM. 25. Pada baris kedua kolom kedua pilih Insert > Image. Lalu masukan gambar yang akan ditampilkan dengan width 180, height 160 dan align default. 26. Masukan Link teks dengan font Times New Roman, style 8, size 14 pixel, pilih bold dan link menuju PRO VIDEO.htm dengan teks VIDEO SHOOTING. 27. Pada baris ketiga kolom kesatu dan kedua. klik Modify pada menu bar > Table > Merge cell. 28. Masukan gambar yang akan ditampilkan dengan width 254, height 121 dan align default. 29. Masukan Link teks dengan font Times New Roman, style 8, size 14 pixel, pilih

bold

dan link

menuju

PRO

PROJECTOR.htm dengan

teks

PROJECTOR. 30. Pada kolom ketiga baris kesatu, dua dan tiga. klik Modify pada menu bar > Table > Merge cell. 31. Masukan gambar yang akan ditampilkan dengan width 186, height 448 dan align default. 32. Lalu Save Dengan nama Index.htm.

50

Gambar 3.22 Tampilan Menu Utama 3.7.1 Membuat Menu About Us Pada dasarnya penulis membuat halaman web semuanya hampir sama. Pada halaman ini menampilkan informasi secara rinci tentang

Company profile

perusahaan, Visi dan Misi perusahaan, Motto perusahaan dan alamat office perusahaan.

51

Gambar 3.23 Tampilan Menu About Us 3.7.2 Membuat Menu Events Pada dasarnya penulis membuat halaman web semuanya hampir sama. Pada halaman ini penulis menampilkan beberapa events yang biasa dikerjakan oleh PT.Citra Ramsi Nugraha.

52

Gambar 3.24 Tampilan Menu Events 3.7.3 Membuat Menu Product Pada dasarnya penulis membuat halaman web semuanya hampir sama. Pada menu ini penulis menampilkan beberapa product-product yang ada pada PT.Citra Ramsi Nugraha.

53

Gambar 3.25 Tampilan Menu Product 3.7.4

Membuat Menu Business Opportunities Pada dasarnya penulis membuat halaman web semuanya hampir sama. Pada

menu ini pengunjung ditawarkan kerjasama dengan pihak PT.Citra Ramsi Nugraha sebagai media partner dalam bidang penyewaan Sound System dan Audio Visual.

54

Gambar 3.26 Tampilan Menu Business Opportunities. 3.7.5

Membuat Menu FAQ Pada dasarnya penulis membuat halaman web semuanya hampir sama. Pada

menu ini pengunjung akan di tampilkan pertanyan dan jawaban yang berkaitan tentang penyewaan barang.

55

Gambar 3.27 Tampilan Menu FAQ 3.8 Menguji Situs Web Menguji situs web bertujuan untuk mengetahui apakah situs yang dibuat dapat diakses oleh umum 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 melakukannnya secara lokal terlebih dahulu. Hal ini dilakukan agar nanti jika ada suatu kesalahan dalam situs, kita dapat melakukan perbaikan.

56

3.9 Publikasi Website Setelah halaman web telah siap, penulis mempublikasikannya kedalam hormat WWW agar hasil yang dibuat dapat dipergunakan oleh setiap pengguna jasa internet. Namun sebelumnya ada beberapa persyaratan yang harus dipenuhi, antara lain : a. Hyperlink harus sudah terhubung dan tidak rusak. b. Tampilan halaman web sudah sesuai dengan keinginan. c. Mengetahui letak direktori pada server web beserta provider. d. Pastikan benar 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 pempublikasian web ini juga tidak memerlukan biaya . Penulis menetapkan besar file yang akan dikirim sebesar kurang dari 5 MB, karena ukuran tersebut sudah ditetapkan oleh pihak provider jika ingin mempublikasikannya sebuah halaman web secara gratis. 3.10 Perangkat Pendukung. Untuk dapat menjalankan program Macromedia Dreamwever MX 2004 ini minimal komputer memiliki spesifikasi sebagai berikut : a. Prosesor intel Pentium II atau lebih, 300 Mhz atau lebih b. Windows 98, Windows 2000, Windows NT,Windows ME dan Windows XP c. Netscape Navigator atau Microsoft Exporer versi 4 keatas. d. Minimal 96 MB RAM disarankan 128 MB RAM. e. Ruangan yang tersisa dalam Harddisk minimal 275 MB f. CD-ROM.

57

BAB IV PENUTUP

4.1

Kesimpulan Publikasi suatu perusahaan dengan jalur internet merupakan salah satu cara

yang cukup efektif pada saat ini untuk memperkenalkan suatu bentuk usaha kepada konsumen dan masyarakat yang ingin mengenal dan bekerja sama dengan sebuah perusahaan. Dengan publikasi di internet suatu perusahaan akan lebih cepat di kenal oleh semua kalangan masyarakat. 4.2

Saran Pembuatan aplikasi website PT.Citra Ramsi Nugraha diharapkan dapat berguna

bagi para penyewa yang akan mengadakan event-event, sehingga dapat langsung menghubungi nomor telepon yang ada di website ini. Tampilan website PT.Citra Ramsi Nugraha yang di rancang oleh penulis masih jauh dari sempurna, oleh karena itu masih banyak yang harus dikembangkan dalam website ini. Untuk itu penulis sangat berharap kepada para pengunjung agar dapat memberikan

kritik

dan

saran

yang

membangun,

mengembangkan rancangan website ini menjadi lebih baik.

58

sehingga penulis

dapat