BAB II

TAMPILAN WEBSITE

A. DRAFT WEBSITE

       Dalam membuat sebuah website yang pertama harus kita lakukan adalah membuat sebuah draft website atau rancangan muka tampilan website pada browser. Draft website ini juga akan membantu kita dalam proses pembuatan website agar lebih mudah dan memakan waktu yang relatif singkat. Draft website yang akan kita buat adalah seperti gambar dibawah ini :

B. GAMBAR

Pada tahap gambar ini kita akan menyiapkan gambar-gambar yang akan kita gunakan dalam membuat website ini seperti gambar header, background ataupun icon-icon. untuk gambar header kita gunakan gambar dengan ukuran 800 x 214 pixels. Seperti gambar dibawah ini :

Untuk persiapan pengaturan gambar :

1.      Mengcopy folder gambar yang ada pada flashdisk atau drive D. Seperti gambar dibawah ini :

2.      Setelah di copy sekarang kita buka drive C:\xampp\htdocs. Lalu buatlah folder dengan nama tokosepatu. Jika sudah paste folder gambar yang telah kita copy tadi ke dalam folder tokobaju yang baru kita buat. Seperti gambar dibawah ini :

C.  WEB EDITOR

Web editor yang akan kita gunakan dalam membuat website ini adalah Adobe Dreamweaver CS6. 

 D. TAMPILAN WEBSITE

Pertama-tama pastikan kita telah menginstal Adobe Dreamweaver CS6, lalu kita buka Adobe Dreamweaver CS6 tersebut. tampilan awal Adobe Dreamweaver CS6 adalah seperti gamabr di bawah ini :

Selanjutnya kita akan membuat dokumen baru php, dengan cara pada bagian Create New klik PHP. Sepeti gambar di bawah ini :

Selanjutnya akan tambil dokumen baru PHP, kemudian pastikan tab yang aktif adalah Design. Seperti gambar di bawah ini :

Yang pertama yang akan kita buat adalah judul website pada kolom title, ketikkan emily’Shop Online. Seperti gambar dibawah ini:

Langkah selanjutnya adalah membuat tabel, dengan cara pada klik tab common lalu klik elemen Table. Kemudian akan tampil kotak dialog Table lalu diisi dengan ketentuan seperti dibawah ini :

Jika sudah akan muncul tampilan tabel yang telah dibuat, lalu atur posisi tabel agar berada ditengah dengan cara mengatur Align : Center pada jendela Properties. Seperti gambar dibawah ini :

 Sampai disini membuat tabel pertama pada dokumen php. Sekarang simpan file tersebut, caranya klik menu File > Save atau tekan tombol Ctrl + S.

Kemudian kotak dialog Save akan tampil, simpanlah pada lokasiC:\xampp\hotdocs\tokobaju. Beri nama dokumen php tersebut dengan namaindex.php. Sampai disini pembuatan tabel awal untuk membangun website penjualan baju online selesai.

E. MEMBUAT HEADER WEBSITE

Setelah berhasil menyimpan file PHP. Tahap selanjutnya adalah membuat header website . Klik baris kedua kolom pertam tabel, lalu tahan drag dari posisi P1 sampai posisi P2. Lihat gambar dibawah ini.

Kemudian dalam keadaan ter-blok klik lalu pilih Table > Merge Cells.

 Pada baris kolom yang telah di merge cell, kli lalu pada tab Common klik elemenImage. 

Kemudian kotak dialog Select Image Source akan tampil. Buka folder Gambar pada lokasi C:\xampp\htdocs\tokobaju\Gambar, lalu masukkan file gambar dengan nama Header.png.

Jika tampil kotak dialog seperti dibawah ini, klik tombol OK saja.

Setelah dimasukkan gambar tampilan header website akan terlihat seperti dibawah ini.

F. MEMBUAT MENU ATAS

Setelah merancang header website. Tahap selanjutnya adalah membuat menu atas. 

1. Pada dokumen index.php yang masih aktif, blok kolom pada baris pertama pada posisi P1 ke posisi P2.

2. Kemudian gabungkan kedua kolom tersebut menggunakan perintah Merge Cellsseperti yang pernah diajarkan sebelumnya.

3. Pastikan kursor fokus ke kolom teks yang sudah digabung lalu pada jendelaProperties HTML atur untuk Horz : Right dan  Vert : Middle. Kemudian tambahkan tabel baru dengan ketentuan seperti berikut ini. 

Jika sudah pada area tabel yang baru atur untuk Propeties HTML Horz : Right,ketikkan teks : Selamat datang di website kami, maxi boutique siap melayani keperluan Anda dengan harga terbaik, selamat berbelanja.... Lihat gambar dibawah ini.

4. Selanjutnya blok menu teks tersebut pada jendela Properties CSS, atur Font :Trebuchet MS, Arial, Helvetica, sans-serif, size : 12. Jika tampil kotak dialog New CSS Rule ketikkan Teks_Menu_Atas. 

5. Sampai disini pembuatan menu atas selesai.

G. MEMBUAT MENU TENGAH

Selanjutnya membuat menu tengah setelah header website. Ikuti langkah-langkah dibawah ini.

Pada dokumen index.php yang masih aktif, blok kolom pada baris ketiga pada posisi P1 ke posisi P2. Lalu lakukan Merge Cells, untuk menggabungkan kolom seperti perintah sebelumnya.

Selanjutnya tambahkan elemen Image. Pada folder Gambar, masukkan gambar dengan nama Menu_Tengah.jpg. 

Kemudian fokus ke gambar menu tengah tersebut. Lalu pada jendela Properties klik elemenRectangle Hotspot Tool letakkan pada teks Home sehingga akan tampak seperti menutupi.

Lengkapi untk teks yang lainnya seperti Product, Cara Order, Download, About Us,dan Contact Us, sehingga hasil akan terlihat seperti gambar dibawah ini.

Sampai disini pembuatan menu tengah selesai.

G. MEMBUAT MENU KIRI
Sekarang kita membuat menu kiri, menu kiri digunakan untuk fasilitas seperti login member, daftar member, kategori barang, news, testimonial, dan lain sebagainya. Ikuti langkah-langkah dibawah ini.Pada dokumen index.php yang masih aktif anda aktifkan kolom pertama dari baris keempat, lalu tambahkan elemen Div Tag. Kemudian akan tampil kotak dialog Insert Div Tag. Klik tombol New CSS Rule. pada kolom Selector Name kotak dialog New CSS Rule, ketikkan Area_Menu_Kiri.

Selanjutnya kembali pada jendela dokumen buka tab Code lengkapi kode CSS untukArea_Menu_Kiri. Sekalian lengkapi kode CSS yang nantinya akan digunakan untuk membuat menu berikutnya, untuk itu lengkapi kode seperti berikut.

Kembali ke tampilan design jendela dokumen, hapus teks Content for class “Area_Menu_Kiri” Goes Here. Lalu tambahkan elemen Form.

Selanjutnya di dalam area form, tambahkan tabel dengan ketentuan seperti berikut ini. Hasil akan terlihat seperti gambar dibawah.

Pada baris pertama dan kedua dari kolom pertama, ketikkan teks User dan Password. Lihat gambar dibawah ini.

Fokus ke kolom ketiga baris pertama lalu tambahkan elemen Text Field, pada kotak dialog Input Tag Accesibility Attributes, ketikkan usertxt untuk kolom ID

Tambahkan text field berikutnya pada baris kedua kolom ketiga, beri ID : pswtxt, lalu aturlah seperti dibawah ini.