.
3.2.2 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
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
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
3.2.3
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.
3.2.4
Memilih Font Untuk memilih fon gunakanlah :
10
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.
3.2.5
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.
3.2.6
Menyimpan Dokumen Untuk menyimpan dokunen yang telah dibuat, maka lakukan langkahlangkah berikut ini : 11
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
, sehingga muncul kotak dialog Select
Image Source.
12
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 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.
3.4.1
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
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.
G ambar 3.9 Select File (Link)
3.4.2
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
MX, kemudian kliklah icon
, sehingga muncul kotak dialog select
file.
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 sejalan masuknya animasi flash kedalam halaman web, maka akan dijumpai pula Property Inspector Flash. 15
Gambar 3.11 Property Inspector Flash
3.6.1 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. 3.6.1
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
sehingga muncul kotak
dialog.
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
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 :
src=”
“
name=” “ width=””height=””border=””>. Sejalan dengan masuknya Rollover Image kedalam halaman web, maka akan dijumpai pula Property Inspector Rollover Image.
Gambar 3.13 Property Inspector Rollover Image
3.6.2
Membuat tombol flash (Flash Button) Langkah-langkah untuk membuat tombol flash adalah : 17
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
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 :
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
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
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)”>
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
ADMIN CARI PEMESANAN
HAPUS PEMESANAN
Gambar 3.18 Struktur Navigasi Hybrid .
21
PROFIL
3.9 Perancangan Program Adapun perancangan program yang penulis buat dapat dilihat dibawah ini : 3.9.1
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
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
3.9.2
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
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
3.9.3
Rancangan menu Pemesanan
Pada menu pemesanan ini bagi konsumen yang ingin memesan produk PT. Diamond Icecream lewat internet Image 1
Link 1 Link 2
Nama Alamat Nama
Link 3 Jumlah Link 4
Batal
Pesan
24
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
3.9.4
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
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”. 3.10.1 Membuat tampilan Home
Gambar 3.26 Tampilan Halaman Home 26
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.
3.10.2 Membuat tampilan Daftar Produk
Gambar 3.27 Tampilan Daftar Produk
27
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
3.10.2 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
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
3.10.3 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
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
30