Cara Membuat Tampilan Website dengan Dreamweaver CS6

Cara Membuat Tampilan Website dengan Dreamweaver CS6 

Membuat Tampilan Website

          A.  Membuat tabel

1.     Setelah dibuka program Adobe Dreamweaver CS6 maka akan tampil area kerja Dreamweaver CS6 lalu buat dokumen baru PHP .lihat gambar di bawah ini.

 2.     Selanjutnya akan tampil dokumen baru PHP pada Dreamweaver CS6. Lihat gambar di bawah ini.

3.       Kemudian pastikan Tab yang aktif adalah Design. Dan pada bagian mode designer  ada ganti menjadi Classic. Lihat gambar di bawah ini.

4.        Kemudian buat judul website pada kolom Title, ketik Maxi Boutique Online. Caranya lihat gambar di bawah ini.

5.       Selanjutnya membuat tabel, untuk itu klik tab Common lalu klik elemen Tabel. Lihat gambar di bawah ini.

6.        Kemudian akan tampil kotak dialog Table akan tampil buat ketentuan tabel seperti gambar di bawah ini.

7.        Jika sudah pada jendela dokumen akan tampak tabel yang telah dibuat, aturlah posisi tabel agar berada di tengah dengan mengatur Align: Center pada jendela Properties. Lihat gambar di bawah ini.

8.       Sampai disini kita telah membuat tabel pertama pada dokumen PHP. Sekarang simpan file tersebut pada lokasi C:\xampp\htdocs\tokobaju dengan nama index.php. lihat gambar di bawah ini.

·          B.  Membuat header website

1.       Setelah membuat tabel, selanjuntya membuat header website. Klik baris kedua kolom pertama tabel, lalu tahan drag dari posisi P1 sampai posisi P2. Lihat gambar di bawah ini.

2.      Kemudian dalam keadaan terblok klik kanan lalu pilih Table > Merge Cell. Lihat gambar di bawah ini.

3.      Kemudian pada baris kedua kolom yang telah di merge cell klik lalu pad atab Common klik elemen Image. Dan  hasil setelah di merge cell, lihat gambar di bawah ini.

  

 4.     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. lihat gambar di bawah ini.

5.        Jika tampil kotak dialog seperti di bawah ini klik tombol Ok saja.

 

6.     Setelah dimasukkan gambar tampilan header website akan terlihat seperti gambar di bawah ini.

·           C. Membuat menu atas

1. Setelah merancang header website, selanjunya membuat menu atas atau kata-kata penyambutan. Pada dokumen index.php yang masih aktif blok klom pada baris pertama pada posisi P1 ke posisi P2. Lihat gambar di bawah ini.

2.      Kemudian gabungkan kedua kolom tersebut menggunakan perintah Merge Cell seperti cara sebelumnya. Hasil akan terlihat seperti gambar di bawah ini.

3.        Pastikan kursor fokus pada kolom teks yang sudah digabungkan lalu pada jendela Properties HTML atur untuk Horz: Right dan Vert: Middle. Kemudian tambahkan tabel baru dengan ketentuan seperti gambar di bawah ini.

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

5.        Selanjutnya blok menu teks tersebut pada jendela Properties CSS atur Font: Trebuchet MS, Arial, Halvetica, sans-serif, Size:  12. Jika tampil kotak dialog New CSS Rule ketikkan Teks_Menu_Atas. Lihat gambar di bawah ini.

 

 

6.        Pembuatan menu atas selesai. Hasil akan terlihat seperti gambar di bawah ini.

          D. Membuat menu tengah

1.        Setelah menu atas, selanjuntya membuat menu tengah. Pada dokumen index.php yang masih aktif blok klom pada baris ketiga pada posisi P1 ke posisi P2. Lalu lakukan Merge Cell, untuk menggabungkan kolom seperti perintah sebelumnya. Lihat gambar di bawah ini.

2.      Selanjutnya pastikan kursor fokus ke baris ketiga dan kolom yang sudah digabungkan tersebut, lalu tambahkan elemen Image. Pada folder Gambar anda masukkan gambar dengan nama Menu_Tengah.jpg. hasil akan terlihat seperti gambar di bawah ini.

3.         Kemudian pastikan kursor mouse fokus ke gambar menu tengah tersebut. Lalu pada jendela Properties klik elemen Rectangle Hotspot Tool letakkan pada teks Home sehingga akan tampak seperti menutupi. Lihat gambar di bawah.

4.        Lengkapi unruk teks yang lainnya sperti Product, Cara Order, Download, About Us, dan Contact Us, sehingga hasil akan terlihat sperti gambar di bawah ini.

·          E.  Membuat menu kiri

1.        Sekarang membuat menu kiri, menu kiri ini digunakan untuk fasilitas seperti login member, daftar member, kategori barang, news, testimonial, dan lain sebagainya. Pertama pada dokumen index.php yang masih aktif, aktifkan kolom pertama di baris keempat, lalu tambahkan elemen Div Tag. Lihat gambar di bawah ini.

2.        Kemudian akan tampil kotak dialog Insert Div Tag. Klik tombol New CSS Rule ketikkan Area_Menu_Kiri. Lihat gambar di bawah ini.

 3.    Selanjutnya kembali pada jendela dokumen buka tab Code lengkapi kode CSS untuk Area_Menu_Kiri. Lihat gambar di bawah ini.

 

4.        Untuk menghemat langkah dan halaman, sekalian lengkapi kode CSS yang nantinya akan digunakan untuk membuat menu berikutnya,untuk itu lengkapi baris kode seperti di bawah ini.

5.     Kembali lagi ke tampilan design jendela dokumen, hapus teks Content fo class “Area_Menu_Kiri” Goes Here. Lalu tambahkan elemen Form. Lihat gambar di bawah ini.

6.        Kemudian dalam area form tambahkan tabel dengan ketentuan seperti berikut ini. Dan hasil akan terlihat seperti gambar di bawah ini.

7.      Pada baris pertama dan kedua dari kolom tabel yang telah dibuat, ketikkan User dan Password. Lihat gambar di bawah ini.

8.        Kemudian pastikan kusor fokus ke kolom ketiga baris pertama lalu tambahkan elemen Text Field, pada kotak dialog Input Tag AccesibilityAttributes. Ketikkan usertxt untuk kolom ID. Lihat gambar di bawah ini.

 

9.        Tambahkan text field berikutnya pada baris kedua kolom ketiga, beri ID: pswtxt. Lalu aturlah seperti gambar di bawah ini.

  

10.      Sekarang fokus ke kolom ketiga, lalu tambahkan elemen Rollover Image, pada kotak dialog Insert Rollover Image aturlah properties seperti gambar di bawah ini.

11.      Selanjutnya fokus baris kelima lalu gabungkan ketiga kolom menggunakan fungsi Merge Cell dan tambahkan tabel baru dengan ketentuan sebagai berikut. Kemudian beri image dengan nama Menu Kiri Kategori.jpg pada baris pertama tabel yang baru di tambahkan. Lihat gambar di bawah ini.

12.    Untuk menghemat halaman, selanjutnya lengkapi juga tampilan menu kiri dengan cara yang sama seperti langkah-langkah sebelumnya, sehingga akan terlihat seperti gambar di bawah ini.

13.    Sekarang klik baris kedua dari tabel baru Testimonial, kemudian beri perintah BR, lalu tambahkan elemen Div Tag dengan class Teks_Testimonial. Lalu ubah teks menjadi >> isi testimonial dan >> lihat testimonial. Lihat gambar di bawah ini.

14.    Jika sudah, berikan link untuk teks >> isi testimonial, untuk itu blok teks tersebut lalu untuk link ketikkan tetimonial.php. lihat gambar di bawah ini.

15.    Lengkapi juga untuk link teks  >> lihat testimonial, pada kolom link ketikkan lihattestimonial.php.lihat gambar di bawah ini.

16.      Sekarang beralih ke kolom ketiga baris ketiga ketikkan teks Daftar member baru, lalu beri link daftarmember.php. aturlah classuntuk teks sehingga akan terlihat seperti gambar di bawah ini.

              F. Membuat menu kanan

1.        Setelah sebelumnya membuat menu kiri, sekarang membuat menu kanan. Pada menu ini nantinya akan berisi informasi berupa keranjang belanja, kontak penjual seperti ym, no hp, pin bb serta sistem seperti visitor dan lain sebagainya. Informasi yang lain berupa daftar produk best sellers, dan pembayaran, untuk membuatnya yaitu masih pada jendela dokumen index.php yang masih aktif, kali ini aktifkan kolom ketiga dari baris keempat, lalu tambahkan elemen Div Tag. Untuk class gunakan class css Area _Menu_Kanan.

2.        Kemudian di dalam are div tag tambahkan tabel dengan ketentuan seperti di bawah ini dan hasilnya akan terlihas seperti gambar di bawah ini.

 

 

3.        Jika sudah sekarang fokus kursor mouse ke kolom pertama  baris pertama tabel, lalu tambahkan elemen  Image dengan nama Kanton Belanja.png. Dan untuk kolom kedua ketikkan teks Keranjang Baelanja. Hasil seperti gambar di bawah ini.

 

4.          Kemudain pada baris keempat gabungkan kolom menggunakan perintah Merge Cell, lalu beri image dengan nama Menu Kanan Best Seller.jpg. hasil akan terlihat seperti gambar di bawah ini.

5.        Lengkapi untuk image menu, sehingga akan tampak seperti gambar di bawah ini.

6.        Untuk menghemat halaman, lengkapi lagidenga memberi teks pada menu informasi dan pembayaran sehingga akan terlihat seperti gambar di bawah ini.

7.        Terakhir untuk tabel dasar beri warna background bg: #E8EED7. Lihat gambar di bawah ini.

 

              G. Membuat menu search

1.        Masih pada jendela dokumen index.php yang masih aktif, kali ini aktifkan kolom kolom ketiga dari baris pertama lalu tambahkan elemen Div Tag. Utuk class gunakan class css Area_Menu_Kiri.

2.        Kemudian di dalam area div tag tambahkan elemen Form, dan di dalam area form tambahkan tabel dengan ketentuan seperti berikut ini. Dan hasil akan terlihat seperti gambar si bawah ini.

3.        Jika sudah sekarang fokus kursor mouse ke kolom pertama, lalu ketikka teks Search. Dan untuk kolom kedua tambahkan elemen Text Field dan beri nama ID: caritxt. Hasil sementara seperti gambar di bawah ini.  

4.        Sekarang fokus kursor mouse ke kolom ketiga dan tambahkan elemen Rollover Image, pada kotak dialog Insert Rollover Image atur seperti gambar di bawah ini.

5.        Kemudian tambahkan kode <marquee scrollamount=”3”> di awal teks “Selamat datang di website ....” dan </marquee> di akhir teks. Lihat gambar di bawah ini.

           H.  Membuat footer

1.        Footer ini di gunakan untuk menampilkan informasi pembuatan website, tahun atau lain sebagainya. Masih pada jendela dokumen index.php yang masih aktif, kali ini blok baris kelima tabel dasar pada posisi P1 ke posisi P2. Lihat gambar di bawah ini.

2.        Kemudian gabungkan kolom menggunakan perintah Merge Cell, lalu masukkan gambar dengan nama footer.png. hasil akan terlihat seperti gambar di bawah ini.

           I. Memberi background

1.        Membuat backgound gambar agar tampilan website lebih menarik. Pada jendela dokumen index.php yang masih aktif, kemudian pada jendela Properties klik tombol  Page Properties atau anda tekan tombol Ctrl + J. Pada kotak dialog Page Properties yang tampil, klik tombol Browse untuk pilihan Background image. Lalu masukkan gambar dengan nama  Background.gif . Lihat gambar di bawah ini.

2.        Sekarang klik kolom kedua baris keempat, lalu beri warna untuk Bg: #FFFFFF atau warna putih. Lihat gambar di bawah ini.

              J. Melihat layout sementara pada browser

1.        Pastikan sever local Xampp pada control panel telah berjalan kurang lebih seperti terlihat pada gambar di bawah ini.

2.        Selanjutnya buka browser kemudian ketik alamat link http://localhost/tokobaju/, lalu tekan tombol enter. Hasilnya akan terlihat seperti gambar di bawah ini.