18
BAB III PEMBAHASAN MASALAH
3.1
Sekilas Tentang PT. WAIRAU INDOSTONE PT Wairau Indostone merupakan perusahaan yang bergerak di bidang Paving
blok atau batu hias, Wairau stone adalah merek dagang terdaftar untuk produk pelapis lantai dan dinding, yang berkualitas tinggi kelas dunia, untuk pelapis dinding produk Wairau stone yang dapat di gunakan antara lain cladding flat random/regular, cladding corner, cladding bricks, raindrop dan Colorado. Untuk pelapis lantai dapat mempergunakan paving tilles, tiera tiles, dan bahan pendukungnya seperti Bullnose, Grill, dan Plin. Wairau Wairau Stone adalah batu yang di buat secara fabrikasi dengan keunggulankeunggulan yang tidak dimiliki batu alam biasa, Cladding Wairau Stone lebih ringan dan mudah pemasangannya. Paving Wairau Stone lebih keras dan memiliki banyak warna. Produk Wairau Stone di cetak dengan cetakan yang di ambil dari tekstur batu alam terpilih, setiap warna dan tekstur di buat dari bahan dasar beton, batu alam dan pewarna berkualitas serta baha-bahan kimia ramah lingkungan lainnya, batu Wairau Stone terlihat lebih indah dan lebih alami. 3.2
Jenis-Jenis Barang Pada usaha PT Wairau Indostone ini semuanya merupakan penjualan dalam
bidang batu hias atau paving block, adapun Jenis-Jenis barangnya adalah: a. Cladding, Cladding Bricks, Cladding Raindrop, Cladding Colorado. b. Pavers c. Tiles
18
19
3.3
Kendala yang di hadapi 1. Terlambatnya penyampaian informasi kepada distributor di daerah, misalnya: Di daerah Indonesia timur seperti maluku dan irian jaya. 2. Mahalnya biaya untuk interlokal jika ada setiap produk baru, karena kita hanya memberikan informasi melalui talepon. 3. Penyampaian informasi melalui telepon tidak bisa di ikuti dengan catalog, sehingga pembeli tidak dapat langsung mengambil keputusan.
3.4
Struktur Navigasi Home page pada PT Wairau Indostone berisi tampilan utama yang berisi panduan serta link-link yang menghubunkan kehalaman berikutnya. Pada halaman utama inilah Penulis menempatkan semua link tentang usaha dagang tersebut serta berbagai macam catalog produk dari PT Wairau Indostone. Dalam pembuatan Website ini Penulis menggunakan navigasi model hirarki, yang menghandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu.
20
Home .htm
Photo .htm
About us .htm
Product .htm
Links .htm
Pavers .htm
Cladding .htm price
Contact us.htm
News .htm
P1
P2
P3
P4
P5
P6
P7
P8
P9
P10
Tiles .htm price
price
Gambar 3.1 Struktur Navigasi Hirarki 3.5
Perancangan Website Langkah pertama yang dilakukan dalam pembuatan Website adalah
merancang Website secara manual, setelah di buat sebuah rancangan secara manual untuk menentukan halaman-halaman Web yang di butuhkan dalam elemen-elemen pendukungnya. Penulis juga mengumpulkan bahan-bahan yang akan di tampilkan dalam Website, yaitu gambar-gambar juga informasi lain mengenai produk-produk dari usaha dagang tersebut.
21
3.5.1
Homepage Halaman ini nantinya akan menjadi file index.htm.halaman utama yang akan
di buat yang terdiri dari beberapa frame yaitu: 1.
Lambang / Logo
2.
Gambar Back Ground
3.
Tombol-tombol Animasi Flash yang juga merupakan link
Gambar 3.2 3.5.2
Indeks.htm
About us Halaman pofile ini berisi link-link ke dokumen tertentu yang akan menuju ke
halaman selanjutnya, pada file ini penulis menempatkan jenis – jenis informasi tentang perusahaan PT.WAIRAU INDOSTONE yang bisa dilihat oleh pengguna internet. Pada halaman kedua ini penulis membreikan penjelasan tentang perusahaan, dan terdapat beberapa tombol flash yang merupakan link-link dari halaman lainnya.
22
Gambar 3.3. 3.5.3
Profile_company.htm
Product Pada file product.html ini terdapat delapan tombol flash yang menghubungkan
ke delapan buah file, tiga buah lainnya merupakan subfolder dari file product. Dimana didalam layout designnya terdapat juga tiga buah image yang mewakili tiga macam product berlainan jenis, juga terdapat tiga buah artikel.
Gambar 3.4
Product.htm
23
3.5.4
Link Pada file link.html ini terdapat lima tombol flash yang menghubungkan ke
lima buah file, dan juga terdapat tiga buah foto dari perusahaan-perusahaan yang saling bekerja sama. Dimana layout desainnya mengunakan tiga buah image yang mewakili web dari masing-masing perusahaan yang merupakan link dari perusahaan ini.
Gambar 3.5. 3.5.5
Link.htm
New Pada file New.html ini terdapat lima buah tombol Flash yang menghubungkan
ke lima buah file, dan juga terdapat gambar product baru.
Gambar.3.6 New.htm
24
3.5.6
Contact Us Pada
file
Contact_Us.htm
ini
terdapat
lima
tombol
flash
yang
menghubungkan ke lima buah file, dan juga terdapat teks di mana teks ini berisikan nomor telepon dan alamat E-mail dari perusahaan ini dan para beberapa distributor yang tersebar di beberapa kota di indonesia, ini akan
lebih memudahkan bagi si
calaon pembeli untuk menghubungi perusahaan ini, para calon pembeli tidaklah harus langsung pergi ke perusahaan in cukup dengan menghubungi lewat via telepon para calon pembeli akan mendapatkan informasi lebih jelas lagi tentang produk dari perusahaan ini.
Gambar 3.7.
Contact Us.htm
3.6 Pembuatan Situs Web Sebelum Anda membuat situs Web, ada baiknya anda mengetahui pengertian dari situs Web itu sendiri. Situs Web adalah suatu kesatuan dari dokumen-dokumen yang terhubung dengan atribut yang sama. Jadi sebuah situs Web memiliki banyak dokumen yang disebut halaman Web, serta dilengkapi dengan komponen lain, seperti image, media dan objek yang saling berhubungan.
25
3.6.1
Menyisipkan Image Untuk menyisipkan gambar ke dalam document window, lakukan dengan
beberapa langkah berikut: 1. Pada kategori common di insert bar, klik pada ikon image
atau
geser ikon image ke document window. 2. Pilih Insert . Image. Pilihan ini akan menampilkan kotak dialog Select Source lalu pilih File Sistem untuk memilih file grafik/gambar atau pilih Data Source untuk memilih sumber data. 3. Geser sebuah file gambar dari Assets panel pada file panel ke lokasi yang diinginkan pada dokumen window. Selain dengan menggeser, Anda dapat menekan tombol
di bagian bawah panel. File-file yang
tampak pada Assets panelmerupakan file-file dalam folder situs Anda. Untuk menampilkan file gambar, klik pada ikon. 4. Geser sebuah file gambar dari site panel ke lokasi yang Anda inginkan pada document window. Daftar file yang tampak pada Site panel merupakan file-file yang ada pada folder situs yang sudah di set-up. Anda juga dapat mencari file gambar di dalam harddisk Anda dengan mengklik Desktop lalu mencarinya. Anda dapat melihat atau menampilkan file-file folder situs pada site. 5. Geser gambar dari desktop atau windows explorer ke lokasi yang diinginkan pada document window. dans akan di tanya apakah file akan di salin kedalam folder situs. Klik OK untuk menyisipkannya. 6. File gambar yang telah di pilih akan ditampilkan langsung kedalam document window. 3.6.2
Menyisipkan Tombol Flash Untuk membuat tombol Flash, lakukan langkah berikut: 1.
Tempatkan kursor pada tempat yang Anda inginkan.
26
2.
Kerjakan salah satu perintah berikut:
a. Klik tombol
pada Insert Bar kategori
Common. b. Pilih menu Insert
Interactive Image
Flash Button untuk
membuka kotak dialog Insert Flash Button , seperti pada gambar 3.8
Gambar 3.8 tampilan insert flas button
Dari kotak dialog yang tampil, lakukan beberapa pengaturan berikut : 1. Pilih jenis tombol pada kotak Style. Anda dapat melihat contoh animasi tombol denganmengarahkan mouse pada kotak Sample. 2. Masukan teks yang aka ditampilkan pada tombol pada kotak teks Button Text. 3. Tentukan jenis dan ukuran font yang ingin Anda gunakan. 4. Tentukan link yang ingi Anda hubungkan dengan mengetikan alamat link pada kotak teks Link ,atau Anda dapat menentukan alamat link dengan
27
menekan tombol Browse ,kemudian tentukan alamat link yang anda inginkan. 5. Tentukan target/window dari link pada kotak Target 6. Jika Anda ingin memberikan wrna latar belakang yang sesuai dengan warna latar belakang halaman, Anda dapat memilih warna tombol pada palet warna Bg Color. 7. Simpan tombol yang Anda buat dengan mengetikkan sebuah nama pada kotak Save As, dan tekan tombol OK. 3.6.3
Menyisipkan Teks Flash Selain itu Anda juga dapat mengunakan teks yang dibuat dengan format flash
untuk digunakan di dalam halaman Web. Adapun cara menggunakannya adalah sebagai berikut: 1.
Siapkan halaman yang yang akan Anda gunakan untuk teks
dari flash. 2.
Gunakan menu Insert
Flash Text untuk membuat teks
tersebut. 3.
Akan tampil kotak dialog Insert Flash Text seperti yan terlihat
pada gambar 3.9
28
Gambar 3.9. Kotak dialog Insert Flash Text. 4.
Pada kota kotak dialog gambar 3.9 Anda dapat melihat
beberapa parameter yang perlu Anda ketahui sehubungan dengan penggunaan teks flash, yaitu: a.
Font dan Size, digunakan untu menentukan type huruf
dan ukurannya. b.
Properti, dimana anda dapat menetukan Align, baik left,
right, center ataupun justify dan dapat menggunakan Bold ataupun italic. c.
Color da Rollover Color, digunakan untuk menentukan
warna dari teks yan akan ditampilkan pada saat pertama kali dan warna dari teks yang akan di tampilkan pada saat mouse over di teks tersebut. d.
Teks, digunakan untuk menulis teks yan Anda inginkan.
e.
Link, digunakan menampilkan halaman yang Anda
inginkan. f.
Target, digunakan untuk menentukan target atau lokasi
yang akan Anda tampilkan.
29
g.
Back Ground Color, digunakan untuk menetukan warna
latar belakang. h.
Save As, untuk menyimpan file animasi tersebut.
Gunakan browse untuk meletakan pada folder animasi atau image dari lokal folder. 5.
Hasilnya anda dapat melihat pada Gambar 3.10.
Gambar 3.10. Penggunaan Flash text 3.6.4
Pembuatan Rollover Rollover Image digunakan untuk menampilkan dua buah image, yaitu amage
original dn yang ke dua image pada saat mouse berada pada image tersebut. Adapun cara membuatya adalah: 1.
Siapkan dua buah image yang dapat Anda buat dengan
mengunakan software grafik yang Anda kuasai. Anda juga dapat mengambil gambar / image yang Anda sukai.buatlah masing- masing dengan nama file, original.jpg dan Rollover .jpg . anda dapat menggunakan format JPG ataupun GIF. 2.
Simpan kedua file tersebut pada kategori image – misalnya –
pada lokal folder Anda akan lebih mudah untuk di organisasikan. 3.
Siapkan sebuah layout yang akan anda guakan sebagai
pengguna rollover.
30
4.
Untuk membuat rollover image, gunakan menu Insert
Rollover image. Akan tampil kotak dialog Insert Rollover Image seperti terlihat pada Gambar 3.11
Gambar 3.11. Kotak dialog Insert Rollover Image. 5.
Pada kotak dialog tersebut dapat dilihat beberapa parameter,
yaitu: a.
Image Name, digunakan untuk memberika nama pada
image yang akan di buat. b.
Original Image, digunakan untuk menentukan image yan
akan di tampilkan terlebih dahulu. Gunakan tombol Browse untuk mencari file tersebut. c.
Rollover Image, digunakan untuk menentukan imege yang
akan di tampilkan pada saat mouse berada pada image tersebut. d.
Preload Rollover Image, digunakan untuk mengambil
image yang akan digunakan pada rollover image pada waktu halaman di-loading. e.
Alternative text, digunakan untuk menampilkan teks yang
akan di masukan pada saat image tidak di tampilkan.
31
f.
When Clicked, Go To URL, digunaka untuk menentukan
halaman yang akan di tampilkan pada saat menekan rollover tersebut. Gunakan tombol browse untuk mencari file yang akan digunakan.
3.6.5
Pembuatan Frame Untuk membuat sebuah frame dan dapat menampilkannya dengan cara
sebagai berikut: 1.
Aktifkan document window.
2.
Pilih perintah menu Modify
3.
Selanjutnya memili frameset yang sudah disediakan: a.
Framest.
Split frame Left dan Split Frame Right, untuk membagi
frame dengan pola vertikal. b.
Spite Frame Up dan Split Frame Down, untuk membagi
frame dengan pola horisontal. 4.
Untuk menggeser border frame, denga menggunakan pointer
mouse, caranya: a.
Arahkan pointermouse pada border frame yang akan di
geser. b.
Geser border frame tersebut kearah yang di inginkan.
c.
Ulangi lagi perintah untuk menggeser border frame yang
lainnya. 5.
Untuk membuat frame baru dari frame yang sudah ada,
gunakan kombinasi Alt + drag. Caranya. a.
Arahkan pointer mouse ke border frame yang ingin di buat.
b.
Sambil menekan tombol Alt, geser border frame ke arah
yang diinginkan.
32
c.
Ulangi kembali perintah di atas untuk border frame yang
lain. 6.
Untuk memilih dan memodifikasi frame, aktifkan frame panel.
Jika frame panel tidak ampak pada group panel, aktifkan dengan menekan tombol Shift+F2. frame yang disisipkan akan ditampilkan pada frames panel, lihat Gambar 3.12
Gambar 3.12.Tampilan frame pada Frames panel. 3.6.6
Link Langkah-langkah membuat link dengan menggunakan teks yang sudah ada: 1.
Buat sebuah teks yang akan digunakan sbagai link.
2.
Pilih teks tersebut kemudian isikan alamat dalam kotak teks
Link pada Property Inspector. Bisa juga dengan menggunakan ikon folder untuk menentukan alamat tujuan. 3.
Pada document window, teks yang dijadikan link akan di beri
garis di bawah. Untuk membuat Link dengan menggunakan teks baru, ikuti langkah-langkah berikut ini:
33
1. Tempatkan kursor pada tempat yang ingin diberikan sebuah link teks. 2. Klik tombol
Pada Insert Bar kategori common sehingga tampil
kotak dialog Hyperlink. 3. Pada kotak dialog Hyperlink, masukan beberapa ketentuan berikut: a. Text
: Digunakan untuk memasukan 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 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 dibuat.
f. Access Key : Digunakan untuk membuat tombol pintas ke linklink yang ada di halaman Web.
3.7 Pembuatan Halaman web 3.7.1
Mengatur Properti Halaman web Sebelum memulai mendesain halaman web, terlebih dahulu harus mengatur
properti halaman kerja. Properti 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 2004 terbagi dalam 5 kategori, antara lain:
34
a
Appearance Pada bagian ini kita dapat mengaturjenis font untuk halaman, menentukan
style font, ukuran font, warna untuk font, warna latar belakang halaman atau menampilka gambar untuk latar belakang. Selain itu kita juga dapat menentukan margin halaman.
b Links Kategori kedua adalah Links, pada bagian ini kita dapat menentukan jenis font untuk teks link, ukuran font mengubah warna untuk teks link, mengubah warna untuk teks yang telah dikunjungi, mengubah warna untuk teks rollover, mengubah warna untuk teks link yang sedang aktif serta untuk menentukan pemberian garis bawah pada teks link. c
Headings Pada kategori Heading, kita dapat menentukan sendiri styleyang digunakan untuk naskah kita.
d Title/Encoding Kita dapat memberikan judul halaman pada bagian Title. Bagaimana melakukannya dapat kita pelajari pada bahasan-bahasan selanjunya. e
Tracing Image Jika kita ingin menampilkan tampilan gambar sementara pada latar belakang, kita dapat mengaturnya pada bagian ini.
3.7.2
Menambahkan Judul Halaman Web Title digunakan untuk memberikan judul halaman web. Selain melalui kotak dialog page properties, kita juga dapat memberikan judul halaman web dengan mengunakan salah satu perintah berikut in: a
Pada bagian Document bar, ketik judul halaman web pada kotak teks Title
35
b
Pilih menu view – Head Content sehingga pada lembaran kerja kita akan ditambahkan
satu buah tool bar baru, klik ikon yang berada di
sudut atas kirikemudian masukan judul halaman web kita didalam kotak teks Title pada bagian panel Properties.
3.7.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, klik 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.7.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 salah satu warna yang kita suka dengan menggunakan pointer mouse.
3.7.4
3.8
Menentukan Ukuran Margin 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 menentukn nilai margin bawah halaman web.
Publikasi Web Site Di nternet Tujuan dari Publikasi adalah untuk menampilkan desain web anda
ke
pengunjung web lokal atau dunia. Dalam hal ini anda melakukan akses ke
36
remote web server. Untuk melakukan akses tersebut kita harus mempunyai server ISP atau internet server dari sebuah perusahaan. Jika kita belum mempunyai akses menuju server tesebut, kita harus menghubungi salah satu penyedia ISP atau sistem administrator.
