BAB I PENDAHULUAN 1.1 Latar Belakang Masalah Aplikasi Website PT. DIAMOND Menggunakan Macromedia DreamWeaver MX

Transkripsi

1 BAB I PENDAHULUAN 1.1 Latar Belakang Masalah Dengan meningkatnya persaingan yang semakin ketat pada saat sekarang ini PT. Diamond mengeluarkan produk-produk terbaru agar dapat bersaing dengan perusahaan yang sejenis. Kurangnya promosi dan iklan produk PT. Diamond, maka konsumen kurang tahu akan informasi produk yang dikeluarkan oleh PT. Diamond. Karena kurangnya informasi dan promosi kepada konsumen mengenai produk ini sehingga pendapatan berkurang, konsumenpun kurang mengenal akan produk PT. Diamond yang dikeluarkan. Sehingga pemasaran produk PT. Diamond sulit dikenal oleh konsumen. Dengan adanya web ini para konsumen PT. Diamond diharapkan dapat dengan mudah mengetahui tentang informasi produk dari PT.Diamond yang baru maupun yang ada terutama produk ICE CREAM karena dengan web ini PT. Diamond dapat langsung memberikan informasi langsung kepada para konsumen dan juga berusaha untuk dapat memenuhi kebutuhan konsumen akan produk yang diberikan oleh PT.Diamond. Dunia informasi dewasa ini tidak sesulit sebelumnya seiring dengan perkembangan zaman dan teknologi yang semakin mutakhir. Internet merupakan salah satu informasi yang diciptakan oleh kemutakhiran teknologi dan memberikan informasi tanpa adanya batasan ruang dan waktu. Oleh karena itu dengan adanya permasalahan tersebut penulis mengambil masalah dengan judul Aplikasi Website PT. DIAMOND Menggunakan Macromedia DreamWeaver MX. 1

2 1.2 Pembatasan Masalah Penulis membatasi masalah ini pada tampilan produk barang, daftar harga barang beserta laporan pemesanan barang. 1.3 Tujuan Penulisan Penulis memberikan informasi mengenai produk-produknya, jenis-jenis barangmya beserta daftar harga barang dengan menggunakan aplikasi Macromedia Dreamweaver MX. 1.4 Metode Penelitian Untuk mendapatkan informasi penulis mengumpulkan informasi dengan menggunakan metode : 1. Studi Pustaka Penulis menggunakan beberapa buku penunjang sebagai bahan referensi guna memperoleh penjelasan teori yang diperlukan 2. Metode Observasi Penulis melakukan wawancara langsung dan meminta data produk dengan karyawan PT. Diamond. 1.5 Sistematika Penulisan Agar Penulisan Ilmiah ini tersusun secara sistematis, maka pembahasan masalah mengenai materi ini, penulis membagi menjadi empat bab. Bab I Pendahuluan Berisi pendahuluan yang mencakup latar belakang penulisan, pembatasan masalah, tujuan penulisan serta metode penelitian yang digunakan oleh penulis. Bab II Landasan Teori 2

3 Bab ini menjelaskan beberapa teori yang mendukung atau berhubungan dalam penulisan. Yaitu mengenai Internet, Dreamweaver MX, lainnya yang akan diperjelas dalam bab II dan yang dipergunakan dalam program di dalam bab III. Bab III Pembahasan Masalah Bab ini berisikan mengenai pembahasan serta rancangan navigasi dan aplikasi website dengan Dreamweaver MX mulai dari input data sampai dengan hasil dari output datanya. Bab IV Penutup Bab penutup ini berisikan kesimpulan dengan disertai saran- saran dari pembahasan bab sebelumnya. 3

4 Bab III PEMBAHASAN PEMBUATAN WEBSITE. Pada bab ini dibahas bagaimana merancang dan membangun sebuah website PT.DIAMOND ICE CREAM. Dalam pembuatan website ini lebih banyak bekerja dengan menggunakan aplikasi Macromedia Dreamweaver MX ditambah aplikasi lain brfungsi sebagai pendukung seperti Macromedia Flash MX dan adobe photosop7.0. Macromedia Dreamwaver MX merupakan program apliksi generator HTML yang didalamnya terdapat fasilitas yang memudahkan dalam membangun atau membuat sebuah halaman web.dalam pembahsan ini akan dibagi menjadi beberapa bagian. Bagian petama akan menjelaskan tentang dasr pembuatan halamn web serta teknik dalam menyisipkan teks,gambar maupun animasi dan membuat tombol, kedua menjelaskan struktur navigasi dari website, dan ketiga menjelaskan proses dari halamn web. 3.1 Proses Halaman Web Setelah semua persiapan awal untuk membuat website telah dilaksanakan dengan baik, maka berartitelah siap untuk memualidan membuat sebuah website PT.DIAMOND ICE CREAM dngan software web desain Macromedia Media Dreamweaver MX. Berikut cara-cara sedehana yang dapat dilakukan untuk membuat website ini: Membuat Folder PT.DIAMOND ICE CREAM 4

5 Langakh-langkah yang biasa diikuti untuk membuat site baru adalah sebagai berikut : 1. Bukalah Windows Explorer. Maksudnya adalah untuk membuat folder baru yang dijadikan Root Folder. 2. Masukkan ke drive C:\harddisk 3. Tekan Menu File>New>Folder 4. Kemudian namailah folder ini dengan nama ICE CREAM, sehingga memiliki folder baru yang berlokasi di C:\ICE CREAM. Di bawah ini folder ini data-data akan tersimpan Membuat Root Folder Ada beberapa langkah yang harus dilakukan untuk menciptakan Root Folder dengan Macromedia Dreamweaver MX, dibawah ini adalah langkah-langkah untuk membuat Root Folder, yaitu: 1. Jalankan Macromedia Dreamweaver MX 2. Tekanlah Menu Site dan pilih New Site 3. Muncul kotak dialog site definition. Di bagian atas jendela itu tersaji dua pilihan. Basic dan advanced, pilihlah advanced dalam keadaan terpilih. 4. Pada Text_Box Site Name tulislah PT.DIAMOND ICE CREAM 5. Pada Text_Box Local Root Folder tulislah folder C:\ICE CREAM\ atau klik icon untuk mencari folder yang telah dibuat. 6. Aktifkan pilihan dengan cara mengklik check box yang ada. 7. Dibagian HTTP address, masukkan alamat Website 8. Klik pilihan 9. Tekan tombol 5

6 Gambar 3.1 Site Definition Dibagian kanan Dreamweaver MX terdapat situs baru yang sudah kita buat tadi dalam sebuah jendela files disini, kita bias melakukan beragam hal seperti mendeteksi semua file, menghapus file, dan lainnya. Gambar 3.2.Jendela Files 6

7 3.1.3 Membuat Halaman Baru Pembuatan dokumen baru dapat dibuat melalui kotak dialog New Document. Adapun caranya adalah sebagai berikut: 1. Klik menu file > New sehingga muncul kotak dialog New Document 2. Pada kotak dialog tersebut, pilihlah General 3. Pada kolom Subsistem Basic page, pilhlah HTML 4. Setelah itu klik Create Gambar 3.3 Kotak Dialog New Document (HTML) Memberi Nama Dokument Website Untuk memberi nama document adalah sebagai berikut : 1. Pilihlah Menu Modify > Page Properties, maka akan mucul kotak dialog page Propertiies 2 Pada Text_box, tulislah nama document yang diinginkan 3 Klik OK 7

8 Gambar 3.4 Page Properties 3.2 Menulis Teks Menulis teks diatas sebuah website tidaklah jauh beda dengan penulis teks diatas Word. Processor semacam Ms. Word, memang pemrogrman website tidak menunjang beberap kemampuan yang bisa dilakukan Ms.Word. Saat berada di Macromedia Dreamweaver MX, saat itu pula sudah diperolehuntuk menuangkan teks diatasnya. Selama menggunakan teks untuk menulis kalimat diatas sebuah halaman website akan ditemani oleh Property Inspector Text. Diatas Property Inspector inilah menemukam fasilitas-fasilitas penulisan teks untulk website. Gambar 3.5 Property Inspector Text 8

9 3.2.1 Baris Baru Dan Paragraph Baru Saat ingin mengetik teks dan ingin memulai baris baru yang terletak dibawah teks pertama, ada dua hal yang perlu diperhatikan. Pertama, teks diketik sebagai baris baru dan kedua, teks diketik sebagai paragraph baru. Untuk memulai baris baru ataupun pindah dari baris yang satu kebaris yang baru caranya hanyalah Shift + Enter, maka pengetikan akan dimulai baris yang baru. Pada Code Inspector, amatilah bahwa tercipta sebuah tag untuk menandai baris baru yaitu tag<br>. Sedangkan untuk memulai paragraph baru hanya menekan tombol Enter saja, maka pengetikkan akan dimulai pada paragraph baru. Kursor akan berda dibaris pertama dengan jarak spasi yang lebih besar. Pada Code Inspector akan tercipta sebuah tag untuk menandai paragraph naru yaitu tag<p> Menggunakan Perantara Alinea 1. Rata tengah (Centre) Ada tiga cara untuk menggunakan rata tengah ini, yaitu : a. Pada Property Inspector Text, kliklah icon b. Kliklah menu Text > Align > Centre c. Tekanlah tombol Ctrl + Alt + Shift + C Pada Code Inspector akan tampil tag HTML untuk rata tengah ini Yaitu <p align = Center > 2. Rata kiri (Align Left) Ada tiga cara untuk menggunakan rata kiri, yaitu : a. Pada Property Inspector Text, kliklah icon b. Kliklah menu Text > Align > Left c. Tekanlah tombol Ctrl + Alt + Shift + L Pada Code Inspector akan tampil tag HTML untuk rata tengah ini Yaitu < p align = Left ). 9

10 3. Rata Kanan (Align Right) Ada tiga cara untuk menggunakan rata kanan, yaitu : a. Pada Property Inspector Text, kliklah icon b. Kliklah menu Text > Align > Right c. Tekanlah tombol Ctrl + Alt + Shift + R Pada Code Inspector akan tampil tag HTML untuk rata kanan ini yaitu < P align = Right >. 4. Rata Kanan-Kiri (Justify) Ada tiga cara untuk menggunakan rata kiri, yaitu : a. Pada Property Inspector Text, kliklah icon b. Kliklah menu Text > Align > Justify c. Tekanlah tombol Ctrl +Alt + Shift + J Pada Code Inspector akan tampil tag HTML untuk rata kanan-kiri ini yaitu <P align = Justify > Memformat Paragraph Untuk memformat bentuk dari sebuah paragraph, maka gunakan salah satu cara sebagai berikut : 1. Pada Property Inspector Text drop down Yang isinya antara lain, pilihlah salah satunya. 2. Pilihlah menu Text > Paragraph Format, Disitu dicantum segala pilihan-pilihan untuk memformat suatu paragraph Memilih Font Untuk memilih fon gunakanlah : 10

11 a. Pada Property Inspector Text, drop down pilihlah jenis font yang akan digunakan. b. Pilihlah menu Text > Font< lalu pilihlah jenis font yang digunakan untuk mengatur ukuran font, caranya adalah : 1. Pada Property Inspector Text, drop down pilihlah ukuran font yang akan dipakai. Ukuran sizenya adalah 2. Pilihlah menu Text > Size, kemudian pilihlah ukuran text yang diingainkan Membuat Text Didalam membuat text untuk website supaya menarik, hurufnya yang diberi warna. Caranya adalah : a. Pada Property Inspector Text, pilihlah icon Text Color yang berisi jenis warna yang dapat dipilih. b. Pilihlah menu Text > Color, kemudian pilihlah warna text yang diingainkan Menyimpan Dokumen Untuk menyimpan dokunen yang telah dibuat, maka lakukan langkahlangkah berikut ini : 11

12 A. Pada menu File > Save< sehingga muncul kotak dialog save Gambar 3.6 Menyimpan dokumen B. Pada kotak save in, pilihlah folder tempat file akan disimpan C. Pada kotak file name, berikan nama file D. Klik Save untuk menyimpan dokumen. 3.3 Menyimpan gambar (Image) Langkah-langkah untuk menyisipkan gambar adalah : a. Pilihlah menu Insert > Image atau klik tombol tab Common yang dapat anda temukan disisi atas Macromedia Dreamweaver MX, kemudian kliklah icon Image Source., sehingga muncul kotak dialog Select 12

13 Gambar 3.7 Select Image Source b. Carilah gambar yang ingin anda sisipkan c. Klik Ok. Page kode HTML terdapat perubahan ketika menyisipka gambar yaitu <img src = Nama File Widht = Height > Sejalan masuknya gambar kedalam halaman Web, maka akan dijumpai pula Property Inspector Image. Gambar 3.8 Property Inspecror Image 3.4 Menggunakan Link Tujuan dibuatnya link adalah agar semua halaman Web saling berkaitan satu sama lain, maka akan tercipta suatu jaringan didalam Website Membuat Link Pada Text Langkah-langkah membuat link pada text adalah : a. Tulislah text yang ingin anda beri link b. Bloklah text yang ingin anda beri link 13

14 c. Kemudian alihkan pandangan pada jendela Properties tepatnya pada kotak link d. Kliklah pada icon Browser for file yang ada disebelah kanan kotak link tersebut sampai masuk ke jendela select file. ambar 3.9 Select File (Link) G Membuat Link Pda Gambar Caranya sama dengan membuat link pada text, perbedaanya hanya pada icon bloknya saja. Jika membuat link pada text, textnya yang diblok. Maka pada pembuatan link pada gambar, gambarnyalah yang diblok. 3.5 Menyisipkan animasi (Flash) Langkah-langkah untuk menyisipkan animasi flash adalah : a. Pilihlah menu Insert > Media > Flash atau klik tombol Tab Common atau Media yang dapat anda temukan disisi atas Macromedia Flash 14

15 MX, kemudian kliklah icon file., sehingga muncul kotak dialog select Gambar 3.10 Select File (Flash) c. Carilah animasi flash yang ingin anda flash yang ingin anda sisipkan. d. Klik Ok. Pada kode HTML terdapat perubahan ketika menyisipkan animasi flash yaitu <object classid= codebese width= height= 0 > <param name= value= > <param name= value= > <enbed sre= quality= pluginspage= width= height= ></embed> </object> sejalan masuknya animasi flash kedalam halaman web, maka akan dijumpai pula Property Inspector Flash. 15

16 Gambar 3.11 Property Inspector Flash Membuat Interactive Images Salah penggunaan model interaktif yang sangat bermanfaat adalah pembuatan tombol, karena dengan tombol kita dapat melakukan hubungan interaksi yang baik antara user (pemakai) dengan web yang disajikan. Penulis akan menjelaskan bagaimana membuat tombol dalam halaman website Membuat Tombol Gambar (Rollover Image) Langkah-langkah untuk menyisipkan Rollover Image adalah : a. Pilih menu Insert > Interactive Images > Rollover Image atau klik Tab Common yang dapat anda temukan disisi atas Macromedia Dreamweaver MX, kemudian kliklah icon dialog. sehingga muncul kotak Gambar 3.12 Insert Rollover image b. Pada kotak dialog tersebut anda dapat melihat beberapa para meter, yaitu : 1. Image Name, digunakan untuk memberikan nama pada imege. 16

17 2. Original Image, digunakan untuk menentukan image yang akan ditampilkan terlebih dahulu, Gonakan tombol browser untuk mencari file. 3. Rollover Image, digunakan untuk menentukan image yang ditampilkan pada saat mouse berada apda image tersebut. 4. Preload Rollover Image, digunakan untuk mengambil image yang akan digunakan pada rollover image pada waktu halaman di loading. 5. Alternative Text, digunakan untuk menampilkan teks yang anda masukan pada saat image tidak ditampilkan. 6. When Clikeed, Go To URL, digunakan untuk menentukan halaman yang akan ditampilkan pada saat anda menakan rollover tersebut. Gunakan tombol Browser untuk mencari file yang anda gunakan. c. Klik Ok Pada kode HTML terdapat perubahan ketika menyisipkan Rollover Inage yaitu : <a href= MM_swapImage(,,,1) ><img src= name= width= height= border= ></a>. Sejalan dengan masuknya Rollover Image kedalam halaman web, maka akan dijumpai pula Property Inspector Rollover Image. Gambar 3.13 Property Inspector Rollover Image Membuat tombol flash (Flash Button) Langkah-langkah untuk membuat tombol flash adalah : 17

18 a. Pilih menu Insert > Interactive Image > Flash Button atu klik tab Media yang anda temukan disisi Macromedia. DreamweaverMX, kemudian kliklah icon XX, sehingga kotak dialog. Insert Flash Button. Gambar 3.14 Insert Flash Button b. Pada kotak dialog tersebut anda dapat melihat beberapa parameter, yaitu : 1. Sample, digunakan untuk melihat model dari type tombol. 2. Style, digunakan untuk memilih model dari tombol. 3. Button Text, digunakan untuk membuat teks tombo.l 4. Font and Size, digunakan untuk memilih type teks da.n ukuran teks.. 5. Link, digunakan untuk memilih halaman yang akan ditampilkan. 18

19 6. Background Color, digunakan untuk menentukan warna latar belakang. 7. Save As, untuk menyimpan file animasiyang akan berbentuk. C.Klik OK Pada mdel HTML, terdapat perubahan ketika menyisipkan tombol Flash yaitu : <object classid= codebase= width= height= > <param name= value=. > <param name= value= > <parama name=value=> <embed src= width= height= quality=pluginspage= type= bg color= base=. ></embed> </object> Sejalan masuknya tombol flash kedalam halaman web, maka akan dijumpai pula Property Inspector Flash Button. Gambar 3.15 Property Inspector Flash Button 3.7 membuat list atau menu Langkah-langkah untuk membuat list /menu adalah sebagai berikut : a. pilih menu Insert>form objects>list/menu atau klik tab forms yang dapat anda temukan disisi atas Macromedia Dreamwaeaver MX, kemudian kliklah icon sehingga muncul b. Untuk mengisi nilai dari list tersebut. Anda dapat menggunakan Property Inspector List 19

20 Gambar 3.16 Property Inspector List/Menu c. Untuk membuat linknya anda dapat menngunakan memilih menu Windows>Behavior atau klik tab behaviors yang ada dipojok kanan atas, pilih icon >jump menu d. Anda dapat membuat link, sesuai dengan keinginan anda. e. Klik ok Gambar 3.17 Jump Menu 20

21 Pada kode HTML terdapat perubahan ketika menyisipkan tombol flash yaitu: <select name= on Change = MM_jump menu ( parents,this 0); MM_jump Menu( parent this,0) > <option selected > </option> <option value= > </option> <option value= > </option> </select> 3.8 Struktur Navigasi Pada pembuatan website PT. Diamond Icecream ini, mempergunakan struktur Navigasi Hybrid atau campuran. Karena pada website ini terdapat percabangan yang tidak berurutan atau acak. Adapun gambarnya adalah : MENU UTAMA HOME PRODUK PEMESANAN PROFIL ADMIN CARI PEMESANAN HAPUS PEMESANAN. Gambar 3.18 Struktur Navigasi Hybrid 21

22 3.9 Perancangan Program Adapun perancangan program yang penulis buat dapat dilihat dibawah ini : Rancangan Halaman Utama Didalam perancangan ini dibagi menjadi 4 bagian : 1. Home 2. Daftar Produk 3. Pemesanan 4. Profil Image 1 Link 1 Image 2 Link 2 Link 3 Link 4 User ID Password ok Link 5 Link 6 Link 7 22

23 Keterangan Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Logo PT. Diamond beserta teks yang bertuliskan SELAMAT DATANG DI WEB PT. DIAMOND ICE CREAM Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks yang menunjukkan pada tampilan pemesanan Link 4 : teksl yang menunjukkan pada tampilan profil Link 5 : teks yang menunjukkan pada perintah reset counter Link 6 : teks yang menunjukkan pada perintah daftar pemesanan Link 6 : teks yang menunjukkan pada perintah logout Rancangan menu Daftar Produk Pada menu daftar produk ini berfungsi menampilkan informasi Daftar Produk beserta daftar harga (PT. Diamond IceCream). Image 1 Link 1 Link 2 Link 3 Image 2 Link 4 23

24 Keterangan Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Berupa gambar dari produk PT. Diamond Icecream beserta keterangan dan harga Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks l yang menunjukkan pada tampilan pemesanan Link 4 teks yang menunjukkan pada tampilan profil Link 5 : teks yang menunjukkan pada perintah reset counter Link 6 : teks l yang menunjukkan pada perintah daftar pemesanan Link 6 teks yang menunjukkan pada perintah logout Rancangan menu Pemesanan Pada menu pemesanan ini bagi konsumen yang ingin memesan produk PT. Diamond Icecream lewat internet Image 1 Link 1 Link 2 Link 3 Link 4 Nama Alamat Nama Jumlah Pesan Batal 24

25 Keterangan Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Teks 2 : Berupa teks beris nama, alamat, nama barang, jumlah barang bagi konsumen yang ingin melakukan pemesanan Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks l yang menunjukkan pada tampilan pemesanan Link 4 teks yang menunjukkan pada tampilan profil Link 5 : teks yang menunjukkan pada perintah reset counter Link 6 : teks l yang menunjukkan pada perintah daftar pemesanan Link 6 teks yang menunjukkan pada perintah logout Rancangan menu Profil Pada menu Profil bagi konsumen yang ingn mengetahui tentang PT. Diamond Icecream dan juga pendiri dari PT. Diamond Icecream Image 1 Link 1 Image 2 Link 2 Link 3 Link 4 User ID Password ok 25

26 Keterangan Image 1 : Berupa tampilan logo PT. Diamond yang disisipkan berupa gambar produk Image 2 : Berupa gamabar dan teks yang berisikan tentang profil PT. Diamond Icecream Link 1 : teks yang menunjukkan pilihan home Link 2 : teks yang menunjukkan pada tampilan daftar produk Link 3 : teks l yang menunjukkan pada tampilan pemesanan Link 4 teks yang menunjukkan pada tampilan profil Link 5 : teks yang menunjukkan pada perintah reset counter Link 6 : teks l yang menunjukkan pada perintah daftar pemesanan Link 6 teks yang menunjukkan pada perintah logout 3.10 Pembuatan Aplikasi Pada tahap ini ini berisikan pembahasan mengenai langkah-langkah pembuatan situs PT.Diamond IceCream Membuat tampilan Home Gambar 3.26 Tampilan Halaman Home 26

27 1. Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2. Kemudian pada properties tentukan ukuran table, Rows, Colum, Align dan warna (Bg). 3. Untuk Background diatur melalui page properties 4. Untukmenyisipkan gambar, klik icon (image), lalu pilih gambar yang anda inginkan. 5. Untuk membuat text Hyperlink yang terdiri Daftar Produk, Pemesanan dan Profil (Hyperlink), lalu anda pilih tombol dan link yang anda inginkan Membuat tampilan Daftar Produk Gambar 3.27 Tampilan Daftar Produk 27

28 1. 1.Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2. Kemudian pada properties tentukan ukuran table, Rows, Colom, Align dan warna (Bg). 3. Untuk Background diatur melalui page properties 4. Untukmenyisipkan gambar, klik icon (image), lalu pilih gambar yang anda inginkan. 5. Untuk membuat text Hyperlink yang terdiri Daftar Produk, Pemesanan dan Profil (Hyperlink), lalu anda pilih tombol dan link yang anda inginkan Membuat Tampilan Pemesanan Gambar 3.28 Tampilan Pemesanan 1. Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2. Kemudian pada properties tentukan ukuran table, Rows, Colom, Align dan warna (Bg). 3. Untuk Background diatur melalui page properties 28

29 4. Untukmenyisipkan gambar, klik icon (image), lalu pilih gambar yang anda inginkan. 5. Untuk membuat text Hyperlink yang terdiri Daftar Produk, Pemesanan dan Profil inginkan (Hyperlink), lalu anda pilih tombol dan link yang anda Membuat Tampilan Profil Gambar 3.29 Tampilan Profil 1. Membuat Layout Page dengan cara memilih menu Draw Layout Table Pada object panel 2. Kemudian pada properties tentukan ukuran table, Rows, Colom, Align dan warna (Bg). 3. Untuk Background diatur melalui page properties 29

30 4. Untukmenyisipkan gambar, klik icon (image), lalu pilih gambar yang anda inginkan. 5. Untuk membuat text Hyperlink yang terdiri Daftar Produk, Pemesanan dan Profil link yang anda inginkan (Hyperlink), lalu anda pilih tombol dan 30