TAMPILAN WEBSITE
1. Tahap kedua pembuatan Toko Baju Online adalah merancang tampilan website agar menarik. Pastikan telah menginstall aplikasi Adobe Dreamweaver ( disini versi CS6), seperti gambar dibawah ini, setelah itu pilih Create New > PHP.
2. Lalu pilih tampilan kerja Classic serta tampilan Design sebagai media pengerjaan tampilan website.
3. Masukan nama judul dari tampilan website pada kolom Title (disini menggunakan nama Maxi Boutique Online)
4. Selanjutnya pilih tab Common lalu elemen Table seperti gambar dibawah ini. Jika sudah dipilih maka akan muncul kotak dialog table yang semua komponen diisi sebagai berikut:
a. Rows : 5
b. Colums : 3
c. Table width : 800 pixels
d. Border Thicknes : 0
e. Header : TOP
Setelah selesai klik OK.
5. Maka akan muncul tampilan seperti dibawah ini serta atur posisi table ketengah dengan memilih Align > Center
6. Simpan hasil pengerjaan pada F:\xampp\htdocs\tokobaju atau lokasi dimana telah diinstal aplikasi Xampp. Beri nama file dengan nama Index.php
7. Masuk pada tahap pembuatan header website serta menu atas dari website. Pada tabel yang telah dibuat sebelumnya, pilh / drag semua baris kedua dari tabel itu lalu klik kanan > Table > Merge Cells untuk menggabungkan semua baris tadi.
8. Letakan kembali kursor pada baris yang telah dimerge tadi. Pilih Common > Elemen Image untuk memasukan gambar header website. Pilih Image mana yang akan dimasukan (disini header.png) lalu pilih OK.
9. Lakukan penggabungan lagi, pilih baris 1 kolom 2 dan 3 untuk digabungkan lalu Klik kanan > Table > Merge Cells
10. Kemudian tempat kursor pada tempat penggabungan tadi. Pilih Common > Table untuk menambahkan Tabel dengan ketentuan : Rows = 1, Columns = 1, Table width = 95 percents serta border thickness 0 pixels. Klik OK.
11. Ketikan Teks sebagai berikut pada kolom baru tadi : “Selamat datang di website kami , Maxi Boutique siap melayani keperluan anda dengan harga terbaik, selamat berbelanja … “ dengan perataan Horz = Right, Vert = Middle
12. Blok Semua teks tadi lalu atur pada jendela Properties. Font = Trebuchet MS, Arial, Helvetica, sans-serif; Size = 12 lalu akan tampil form New CSS Rule, pada selector name beri nama “Teks_Menu_Atas” lalu pilih OK
14. Pastikan kursor berada pada baris 3 yang telah digabungkan lalu pilih Common > Elemen Image untuk memasukan gambar menu tengah website. Pilih Image mana yang akan dimasukan (disini menu_tengah.png) lalu pilih OK.
15. Setelah gambar menu_tengah.jpg tampil lalu pada jendela properties, pilih elemen Rectangle Hotspot Tool. Setelah itu, buatlah kotak pada menu Home, jika muncul kotak dialog klik OK. Begitu seterusnya untuk menu Produk, Cara Order, Download, About Us dan Contact Us hingga semua dilingkupi kotak.
16. Tahap selanjutnya, membuat menu kiri dari Website. Masih dalam lembar kerja berbentuk tabel, Letakkan kursor pada kolom pertama dari baris keempat. Pilih Layout > Insert Div Tag, setelah itu akan muncul kotak dialog maka pilih New CSS Rule, klik OK.
17. Masuk pada kotak dialog selanjutnya. Perhatikan pada Selector Name, isikan nama Area_Menu_Kiri, klik OK.
18. Pilih Category > Type > Klik OK
19. Sekarang pindahlah tab dari Design ke Code. Fokuslah pada Script Area_Menu_Kiri.
20. Masukanlah kode sebagai berikut pada Area_Menu_Kiri seperti digambar bawah ini:
21. Lanjutkan dengan script dibawah ini:
22. Setelah itu kembali pada Tab Design. Hapus teks “Content for Class “Area_Menu_Kiri” Goes Here”. Pilih Forms > Form seperti gambar dibawah ini:
23. Kemudian pilih Common > Table untuk memasukan tabel lagi. Rincian Table seperti digambar dibawah ini:
24. Tulislah User dan Password pada kolom 1 dari baris 1 dan baris 2.
25. Fokuskanlah kursor pada kolom 3 baris 1 (sejajar baris user), pilih Forms > Text field maka akan muncul kotak dialog Input Tag Accessibility Attributes lalu pada kolom ID isikan usertxt lalu OK.
26. Setelah itu ubah propertisnya pada char width = 15, Type = single line
27. Kembali lagi pada kolom 3 baris 2 (sejajar dengan password) seperti pada user, lakukan pilih Forms > Text field maka akan muncul kotak dialog Input Tag Accessibility Attributes lalu pada kolom ID isikan pswtxt lalu OK. Selanjutnya pada propertiesnya ubah char witdh = 15 dan type = password.
28. Sekarang letakkan kursor pada kolom 3 baris 3 kemudian tambahkan elemen rollover image. Pilih Common > Rollover Image.
29. Pada original image masukan gambar aslinya sedangkan pada rollover image masukan gambar untuk rollover kemudian OK.
30. Blok Semua baris 5 kemudian gabungkan mereka dengan Merge Cells. Kemudian tambahkan tabel baru dengan ketentuan: Rows = 2; Columns = 1; Table Width = 100 Percent; Border Thickness = 0 Pixels; Cell Padding = 2; Cell Spacing = 1 Pixels.
31. Tambahkan gambar pada tabel yang baru dibuat tadi (disini Kategori) kemudian lengkapi sesuai keinginan ( News, Testimonial)
32. Fokuskanlah kembali kursor pada kolom 2 dari testimonial. Pilih Text > BR > Line Break.
33. Pilih Layout > Insert Div tag. Pada kolom class isikan Teks_Testimonial lalu OK. Kemudian hapus Teks “Content for class “Teks Testimonial” Goes Here”.
34. Gantikan teks telah dihapus tadi dengan teks seperti gambar dibawah lalu blok teks “>> isi testimonial” serta pada propertisnya linknya diarahkan pada testimonial.php dan teks “>> lihat testimonial” linknya arahkan pada lihattestimonial.php
35. Kembali lagi pada kolom 3 baris 4 (dibawah tombol login) ketikan Teks “Daftar Member Baru”. Aturlah pada propestisnya, linknya arahkan pada daftarmember.php.
36. Terakhir untuk tabel dasar menu kiri baris keempat kolom pertama beri warna background bg = #E8EED7 seperti gambar dibawah ini
37. Tahap selanjutnya adalah membuat menu kanan dari website. Arahkan kursor pada tabel utama kolom ketiga dari baris keempat, tambahkan elemen div tag serta pada kolom class isikan Area_Menu_Kanan.
38. Masih dalam area div tag tadi, tambahkanlah tabel seperti gambar dibawah ini:
39. Setelah itu, pada kolom pertama dari baris pertama tabel baru tadi, tambahkan elemen image seperti gambar di bawah (di sini kantong belanja.jpg) serta ketikan teks pada kolom keduanya “Keranjang Belanja”.
40. Berpindahlah pada baris 4, lakukan merge cells pada baris 4 lalu tambahkan elemen image (disini Menu Kanan Best Seller) kemudian lengkapilah gambarnya seperti dibawah ini:
41. Kemudian lompatlah pada baris 9 dari kolom 2, tulislah teks seperti dibawah ini, serta gambar cabang-cabang dilengkapi dibawah menu Pembayaran.
42. Sekarang masuk pada tahap membuat Menu Search. Pada tabel dasar, tempatkan kursor pada baris 1dari kolom 1. Masukan div tag dengan class Area_Menu_Kiri.
43. Tambahkan tabel pada baris tadi dengan ketentuan, seperti gambar dibawah ini;
44. Pada tabel baru tadi, kolom 1 ketikan “Search”; kolom 2 tambahkan elemen Text Field serta pada kolom ID = caritxt.
45. Kolom 3, masukan elemen image pencarian. ( disini TSearch.jpg serta TSearch Rollover.jpg)
46. Berpindahlah pada tab Code, tambahkan code </marquee> (membuat teks berjalan)
47. Berlanjut pada tahap membuat footer. Pada tabel dasar, semua baris 5 digabungkan.
48. Masukan elemen image, (disini footer.png)
49. Tahap selanjutnya adalah memberi background. Pada jendela properties, klik tombol Page Properties maka akan muncul kotak dialog. Fokuslah pada kolom background image kemudian browse-lah untuk mencari gambar latar belakang (disini background.gif)
50. Kembali lagi pada tabel dasar. Pada baris 4 dari kolom 2, aturlah pada jendela propertiesnya BG = #FFFFFF atau warna putih. Simpanlah hasil pekerjaan ini.
51. Tahap akhir adalah melihat layout sementara pada browser. Bukalah browser anda kemudian pada alamat link ketiklah “localhost/tokobaju/”.
52. Maka inilah hasil dari pengerjaan tentang tampilan website.
