Pada praktikum pada pertemuan kedua ini kita akan membuat tampilan website menggunakan adobe Dreamweaver CS6. Tapi pertama-tama kita siapkan dahulu file gambar. Gambar disini maksudnya seperti gambar header, background, ataupun icon-icon yang diperlukan dalam pembuatan website nantinya. Di bawah ini ada file gambar-gambar untuk pembuatan website, silahkan download terlebih dahulu.
Setelah didownload, extract file tersebut. Lalu buka folder tersebut. Cari folder Gambar dan copy folder Gambar. Lihat gambar di bawah ini.
Jika sudah dicopy sekarang buka drive C:\xampp\htdocs. Lalu buatlah folder baru dengan nama tokobaju. Hasilnya seperti di bawah.
Paste folder Gambar yang telah dicopy sebelumnya tadi yang telah didownload dan diextract ke dalam folder yang telah dibuat dengan nama tokobaju. Hasilnya seperti di bawah.
Perlu anda ketahui bahwa folder xampp pada drive C, akan tercipta jika kita telah menginstall software Xampp (klik link ini untuk melihat cara menginstall xampp).
Web Editor
Kita akan memulai membuat tampilan website menggunakan Web Editor. Web editor digunakan untuk merancang tampilan atau interface dari website yang akan dibuat. Web editor akan mempermudah kita dalam proses pembuatan website, karena kita tidak perlu lagi menuliskan kode HTML secara manual. Kita cukup mengklik dan mengatur konfigurasi yang digunakan.
Saat ini terdapat banyak sekali web editor namun dalam praktikum pemrograman internet ini kita akan menggunakan software Adobe Dreamweaver CS6. Di bawah ini merupakan link download Adobe Dreamweaver CS6 bagi yang belum mempunyai software tersebut. Di dalamnya ada langkah-langkah aktivasi menggunakan crack. Mohon untuk membaca instruksi cara penginstalannya dengan saksama agar tidak terjadi kesalahan saat melakukan penginstalan.
Paste folder Gambar yang telah dicopy sebelumnya tadi yang telah didownload dan diextract ke dalam folder yang telah dibuat dengan nama tokobaju. Hasilnya seperti di bawah.
Perlu anda ketahui bahwa folder xampp pada drive C, akan tercipta jika kita telah menginstall software Xampp (klik link ini untuk melihat cara menginstall xampp).
Web Editor
Kita akan memulai membuat tampilan website menggunakan Web Editor. Web editor digunakan untuk merancang tampilan atau interface dari website yang akan dibuat. Web editor akan mempermudah kita dalam proses pembuatan website, karena kita tidak perlu lagi menuliskan kode HTML secara manual. Kita cukup mengklik dan mengatur konfigurasi yang digunakan.
Saat ini terdapat banyak sekali web editor namun dalam praktikum pemrograman internet ini kita akan menggunakan software Adobe Dreamweaver CS6. Di bawah ini merupakan link download Adobe Dreamweaver CS6 bagi yang belum mempunyai software tersebut. Di dalamnya ada langkah-langkah aktivasi menggunakan crack. Mohon untuk membaca instruksi cara penginstalannya dengan saksama agar tidak terjadi kesalahan saat melakukan penginstalan.
Membuat Tabel
Setelah diinstal kita akan memulai tampilan website dengan Adobe Dreamweaver CS6. Langkah pertama adalah kita membuat tabel. Berikut langkah-langkahnya:
Buka aplikasi Adobe Dreamweaver CS6, lalu setelah tampil area kerja Dreamweaver CS6 kita buat dokumen baru php, caranya pada bagian Create New kita klik PHP. Lihat gambar di bawah.
Apabila jendela di atas tidak tampil, kita bisa menggunakan menu File | New yang ada pada barisan menu Top. Selanjutnya akan tampil dokumen baru PHP pada Dreamweaver CS6. Kemudian pastikan tab yang aktif adalah Design dan pada bagian mode Designer diganti menjadi Classic. Tampilannya seperti di bawah ini.
Yang pertama kita buat adalah judul website pada kolom Title, ketikkan Maxi Boutique Online. Caranya seperti gambar di bawah ini.
Jika sudah, sekarang kita akan membuat tabel. Untuk itu kita klik tab Common lalu klik elemen Tabel. Lihat gambar di bawah.
Kemudian akan tampil kotak dialog Table. Lalu buat ketentuan tabel seperti gambar di bawah.
Ketentuan tabel lebih jelas seperti di bawah ini.
Hasilnya akan terlihat seperti gambar di bawah ini.
Sekarang pada baris pertama dan kedua dari kolom pertama kita ketikkan teks User dan Password. Lihat gambar di bawah.
Kemudian pastikan kursor fokus ke kolom ketiga baris pertama lalu tambahkan elemen Text Field.
Pada kotak dialog Input Tag Accessibility Attributes, kita ketikkan usertxt untuk kolom ID. Lihat gambar di bawah.
Tambahkan text field berikutnya pada baris kedua kolom ketiga, beri ID : pswtxt.
Sekarang kita fokus ke kolom ketiga baris ketiga, lalu tambahkan elemen Rollover Image.
Pada kotak dialog Insert Rollover Image aturlah properties seperti gambar di bawah ini. Untuk Original Image dan Rollover Image gambar yang digunakan ada di folder Gambar.
Selanjutnya fokus baris kelima lalu gabungkan ketiga kolom menggunakan fungsi Merge Cell dan tambahkan tabel baru dengan ketentuan seperti berikut ini.
Kemudian masukan image dengan nama Menu Kiri Kategori.jpg pada baris pertama tabel yang baru ditambahkan. Lihat gambar di bawah ini.
Selanjutnya lengkapi juga tampilan menu kiri dengan cara yang sama seperti langkah-langkah sebelumnya, sehingga akan terlihat seperti gambar di bawah ini.
Sekarang kita klik baris kedua dari tabel baru Testimonial, kemudian kita beri perintah BR.
Lalu tambahkan elemen Div Tag dengan class Teks_Testimonial.
Lalu ubah teks menjadi >> isi testimonial dan >> lihat testimonial. Jika sudah berikan link untuk teks >> isi testimonial, untuk itu blok teks tersebut lalu untuk link ketikkan testimonial.php. Lihat gambar di bawah ini.
Lengkapi juga untuk link teks >> lihat testimonial, pada kolom Link ketikkan lihattestimonial.php.
Jika sudah sekarang beralih ke kolom ketiga baris ketiga ketikkan teks Daftar member baru, lalu beri link daftarmember.php. Aturlah class untuk teks sehingga akan terlihat seperti gambar di bawah ini.
Terakhir untuk tabel dasar menu kiri baris keempat kolom pertama kita beri warna background bg : #E8EED7. Kita lihat gambar di bawah ini.
Membuat Menu Kanan
Setelah sebelumnya membuat menu kiri sekarang kita akan 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 kita ikuti langkah-langkah di bawah ini.
Masih pada jendela dokumen index.php yang masih aktif, kali ini aktifkan kolom ketiga dan baris keempat.
Lalu tambahkan elemen Div Tag. Untuk class gunakan class css Area_Menu_Kanan.
Kemudian di dalam area div tag kita tambahkan tabel dengan ketentuan seperti berikut ini.
Jika muncul tampilan seperti di bawah ini, klik Yes.
Sekarang fokus kursor mouse ke kolom kedua baris pertama.
Dan tambahkan elemen Rollover Image.
Pada kotak dialog Insert Rollover Image kita seperti gambar di bawah ini.
Hasilnya akan seperti di bawah ini.
Yang pertama kita buat adalah judul website pada kolom Title, ketikkan Maxi Boutique Online. Caranya seperti gambar di bawah ini.
Jika sudah, sekarang kita akan membuat tabel. Untuk itu kita klik tab Common lalu klik elemen Tabel. Lihat gambar di bawah.
Kemudian akan tampil kotak dialog Table. Lalu buat ketentuan tabel seperti gambar di bawah.
Ketentuan tabel lebih jelas seperti di bawah ini.
- Beri nilai Rows menjadi 5 dan Columns menjadi 3
- Ubahlah Table width menjadi 800 Pixels.
- Ubahlah Border Thickness menjadi 0 Pixels.
- Ubah pula Cell padding dan Cell spacing menjadi 0.
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.
Sampai di sini kita telah membuat tabel pertama pada dokumen php. Sekarang kita simpan file tersebut, caranya kita klik menu File > Save atau tekan tombol Ctrl + S. Lihat gambar di bawah.
Kemudian kotak dialog Save akan tampil, simpanlah pada lokasi C:\xampp\htdocs\tokobaju. Beri nama dokumen php tersebut dengan nama index.php. Lihat gambar di bawah ini.
Sampai di sini pembuatan tabel awal untuk membangun website penjualan baju online selesai.
Membuat Header Website
Setelah kita berhasil menyimpan file PHP. Tahap selanjutnya adalah membuat header website. Langkah-langkahnya sebagai berikut.
Pertama klik baris kedua kolom pertama tabel, lalu tahan drag dari posisi P1 sampai posisi P2. Lihat gambar di bawah ini.
Kemudian dalam keadaan ter-blok kita klik kanan lalu pilih Table > Merge Cells. Lihat gambar di bawah.
Hasil setelah di merge cells akan terlihat seperti gambar di bawah.
Pada baris kedua kolom yang telah di merge cell kita klik, lalu pada tab Common klik elemen Image. Lihat gambar di bawah ini.
Kemudian kotak dialog Select Image Source akan tampil. Kita buka folder Gambar pada lokasi C:\xampp\htdocs\tokobaju\Gambar, lalu masukkan file gambar dengan nama Header.png. Lihat gambar di bawah ini.
Jika tampil kotak dialog seperti di bawah ini, kita klik tombol OK saja.
Setelah dimasukkan gambar tampilan header website akan terlihat seperti gambar di bawah ini.
Membuat Menu Atas
Setelah kita merancang header website, tahap selanjutnya adalah membuat menu atas. Untuk membuatnya ikuti langkah-langkah di bawah ini.
Pada dokumen index.php yang masih aktif kita blok kolom pada baris pertama pada posisi P1 ke posisi P2. Lihat gambar di bawah ini.
Kemudian gabungkan kedua kolom tersebut menggunakan perintah Merge Cells seperti yang pernah diajarkan sebelumnya. Hasilnya akan seperti gambar di bawah ini.
Pastikan kursor fokus ke kolom teks yang sudah digabung lalu pada jendela Properties HTML kita atur untuk Horz : Right dan Vert : Middle. Kemudian tambahkan label baru dengan ketentuan seperti berikut ini:
Ubah Size menjadi 12.
Membuat Menu Tengah
Selanjutnya kita akan membuat menu tengah setelah header website, untuk membuat menu tengah ikuti langkah-langkah di bawah ini.
Pada dokumen index.php yang masih aktif kita blok kolom pada baris ketiga pada posisi P1 ke posisi P2. Lalu kita lakukan Merge Cells, untuk menggabungkan kolom seperti perintah sebelumnya. Lihat gambar di bawah ini.
Selanjutnya pastikan kursor fokus ke baris ketiga dari kolom yang sudah digabungkan tersebut, lalu tambahkan elemen Image. Pada folder gambar kita masukkan gambar dengan nama Menu_Tengah.jpg. Hasilnya akan terlihat seperti gambar di bawah.
Kemudian kita 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. Jika ada muncul peringatan klik OK. Lihat gambar di bawah ini.
Lengkapi untuk teks yang lainnya seperti Product, Cara Order, Download, About Us, dan Contact Us, sehingga hasilnya akan terlihat seperti gambar di bawah ini.
Membuat Menu Kiri
Sekarang kita akan membuat menu kiri, menu kiri ini digunakan untuk fasilitas seperti login member, daftar member, kategori barang, news, testimonial, dan lain sebagainya. Untuk membuatnya, ikuti langkah-langkah di bawah ini.
Pada dokumen index.php yang masih aktif kita aktifkan kolom pertama dari baris keempat, lalu tambahkan elemen Div Tag. Lihat gambar di bawah ini.
Kemudian akan tampil kotak dialog Insert Div Tag. Kita klik tombol News CSS Rule.
Pada kolom Selector Name kotak dialog News CSS Rule kita ketikkan Area_Menu_Kiri. Jika sudah, klik OK.
Muncul jendela seperti di bawah, klik OK.
Jika muncul jendela Insert Div Tag, pada bagian Class pilih Area_Menu_Kiri. Lalu klik OK.
Selanjutnya kembali pada jendela dokumen buka tab Code lengkapi kode CSS untuk Area_Menu_Kiri. Lihat gambar di bawah ini.
Jika sudah, untuk mempersingkat, kita lengkapi kode CSS yang nantinya akan digunakan untuk membuat menu berikutnya, untuk itu lengkapi baris kode seperti berikut ini.
Atau jika anda malas mengetik, tinggal download kode sintaksnya di link download di bawah ini.
Download Kode CSS
Jika sudah, kembali lagi ke tampilan design jendela dokumen, hapus teks Content for class "Area_Menu_Kiri" Goes Here. Lalu tambahkan elemen Form. Lihat gambar di bawah ini.
Kemudian di dalam are form kita tambahkan tabel dengan ketentuan seperti berikut ini.
Setelah kita berhasil menyimpan file PHP. Tahap selanjutnya adalah membuat header website. Langkah-langkahnya sebagai berikut.
Pertama klik baris kedua kolom pertama tabel, lalu tahan drag dari posisi P1 sampai posisi P2. Lihat gambar di bawah ini.
Kemudian dalam keadaan ter-blok kita klik kanan lalu pilih Table > Merge Cells. Lihat gambar di bawah.
Hasil setelah di merge cells akan terlihat seperti gambar di bawah.
Pada baris kedua kolom yang telah di merge cell kita klik, lalu pada tab Common klik elemen Image. Lihat gambar di bawah ini.
Kemudian kotak dialog Select Image Source akan tampil. Kita buka folder Gambar pada lokasi C:\xampp\htdocs\tokobaju\Gambar, lalu masukkan file gambar dengan nama Header.png. Lihat gambar di bawah ini.
Jika tampil kotak dialog seperti di bawah ini, kita klik tombol OK saja.
Setelah dimasukkan gambar tampilan header website akan terlihat seperti gambar di bawah ini.
Membuat Menu Atas
Setelah kita merancang header website, tahap selanjutnya adalah membuat menu atas. Untuk membuatnya ikuti langkah-langkah di bawah ini.
Pada dokumen index.php yang masih aktif kita blok kolom pada baris pertama pada posisi P1 ke posisi P2. Lihat gambar di bawah ini.
Kemudian gabungkan kedua kolom tersebut menggunakan perintah Merge Cells seperti yang pernah diajarkan sebelumnya. Hasilnya akan seperti gambar di bawah ini.
Pastikan kursor fokus ke kolom teks yang sudah digabung lalu pada jendela Properties HTML kita atur untuk Horz : Right dan Vert : Middle. Kemudian tambahkan label baru dengan ketentuan seperti berikut ini:
- Beri nilai Rows menjadi 1 dan Columns menjadi 1.
- Ubahlah Table width menjadi 95 percent.
- Ubah pula untuk Border Thickness menjadi 0 Pixels.
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.
Selanjutnya kita blok menu teks tersebut pada jendela Properties CSS, kita atur Font : Trebuchet MS, Arial, Helvetica, sans-serif.
Jika tampil kotak dialog New CSS Rule kita ketikkan Teks_Menu_Atas. Lihat gambar di bawah ini.
Ubah Size menjadi 12.
Sampai disini pembuatan menu atas selesai. Hasil akan terlihat seperti gambar di bawah ini.
Selanjutnya kita akan membuat menu tengah setelah header website, untuk membuat menu tengah ikuti langkah-langkah di bawah ini.
Pada dokumen index.php yang masih aktif kita blok kolom pada baris ketiga pada posisi P1 ke posisi P2. Lalu kita lakukan Merge Cells, untuk menggabungkan kolom seperti perintah sebelumnya. Lihat gambar di bawah ini.
Selanjutnya pastikan kursor fokus ke baris ketiga dari kolom yang sudah digabungkan tersebut, lalu tambahkan elemen Image. Pada folder gambar kita masukkan gambar dengan nama Menu_Tengah.jpg. Hasilnya akan terlihat seperti gambar di bawah.
Kemudian kita 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. Jika ada muncul peringatan klik OK. Lihat gambar di bawah ini.
Membuat Menu Kiri
Sekarang kita akan membuat menu kiri, menu kiri ini digunakan untuk fasilitas seperti login member, daftar member, kategori barang, news, testimonial, dan lain sebagainya. Untuk membuatnya, ikuti langkah-langkah di bawah ini.
Pada dokumen index.php yang masih aktif kita aktifkan kolom pertama dari baris keempat, lalu tambahkan elemen Div Tag. Lihat gambar di bawah ini.
Kemudian akan tampil kotak dialog Insert Div Tag. Kita klik tombol News CSS Rule.
Pada kolom Selector Name kotak dialog News CSS Rule kita ketikkan Area_Menu_Kiri. Jika sudah, klik OK.
Muncul jendela seperti di bawah, klik OK.
Jika muncul jendela Insert Div Tag, pada bagian Class pilih Area_Menu_Kiri. Lalu klik OK.
Selanjutnya kembali pada jendela dokumen buka tab Code lengkapi kode CSS untuk Area_Menu_Kiri. Lihat gambar di bawah ini.
Jika sudah, untuk mempersingkat, kita lengkapi kode CSS yang nantinya akan digunakan untuk membuat menu berikutnya, untuk itu lengkapi baris kode seperti berikut ini.
Download Kode CSS
Jika sudah, kembali lagi ke tampilan design jendela dokumen, hapus teks Content for class "Area_Menu_Kiri" Goes Here. Lalu tambahkan elemen Form. Lihat gambar di bawah ini.
Kemudian di dalam are form kita tambahkan tabel dengan ketentuan seperti berikut ini.
- Beri nilai Rows menjadi 9 dan Columns menjadi 3.
- Ubahlah Table width menjadi 100 percent.
- Ubah pula untuk Border Thickness menjadi 0 Pixels.
- Ubah pula untuk Cell Padding menjadi 0 dan Cell Spacing menjadi 2 Pixels.
Hasilnya akan terlihat seperti gambar di bawah ini.
Sekarang pada baris pertama dan kedua dari kolom pertama kita ketikkan teks User dan Password. Lihat gambar di bawah.
Kemudian pastikan kursor fokus ke kolom ketiga baris pertama lalu tambahkan elemen Text Field.
Pada kotak dialog Input Tag Accessibility Attributes, kita ketikkan usertxt untuk kolom ID. Lihat gambar di bawah.
Sekarang kita fokus ke kolom ketiga baris ketiga, lalu tambahkan elemen Rollover Image.
Pada kotak dialog Insert Rollover Image aturlah properties seperti gambar di bawah ini. Untuk Original Image dan Rollover Image gambar yang digunakan ada di folder Gambar.
Hasilnya akan seperti gambar di bawah ini.
Selanjutnya fokus baris kelima lalu gabungkan ketiga kolom menggunakan fungsi Merge Cell dan tambahkan tabel baru dengan ketentuan seperti berikut ini.
- Beri nilai Rows menjadi 2 dan Columns menjadi 1.
- Ubahlah Table width menjadi 100 percent.
- Ubah pula untuk Border Thickness menjadi 0 Pixels.
- Ubah pula untuk Cell Padding menjadi 2 dan Cell Spacing menjadi 1 Pixels.
Kemudian masukan image dengan nama Menu Kiri Kategori.jpg pada baris pertama tabel yang baru ditambahkan. Lihat gambar di bawah ini.
Selanjutnya lengkapi juga tampilan menu kiri dengan cara yang sama seperti langkah-langkah sebelumnya, sehingga akan terlihat seperti gambar di bawah ini.
Sekarang kita klik baris kedua dari tabel baru Testimonial, kemudian kita beri perintah BR.
Lalu tambahkan elemen Div Tag dengan class Teks_Testimonial.
Lalu ubah teks menjadi >> isi testimonial dan >> lihat testimonial. Jika sudah berikan link untuk teks >> isi testimonial, untuk itu blok teks tersebut lalu untuk link ketikkan testimonial.php. Lihat gambar di bawah ini.
Lengkapi juga untuk link teks >> lihat testimonial, pada kolom Link ketikkan lihattestimonial.php.
Jika sudah sekarang beralih ke kolom ketiga baris ketiga ketikkan teks Daftar member baru, lalu beri link daftarmember.php. Aturlah class untuk teks sehingga akan terlihat seperti gambar di bawah ini.
Terakhir untuk tabel dasar menu kiri baris keempat kolom pertama kita beri warna background bg : #E8EED7. Kita lihat gambar di bawah ini.
Hasil Menu Kiri akan tampak seperti gambar di bawah ini.
Membuat Menu Kanan
Setelah sebelumnya membuat menu kiri sekarang kita akan 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 kita ikuti langkah-langkah di bawah ini.
Masih pada jendela dokumen index.php yang masih aktif, kali ini aktifkan kolom ketiga dan baris keempat.
Lalu tambahkan elemen Div Tag. Untuk class gunakan class css Area_Menu_Kanan.
Kemudian di dalam area div tag kita tambahkan tabel dengan ketentuan seperti berikut ini.
- Beri nilai Rows menjadi 24 dan Columns menjadi 2.
- Ubahlah Table width menjadi 100 percent.
- Ubah pula untuk Border Thickness menjadi 0 Pixels.
- Ubah pula untuk Cell Padding menjadi 0 dan Cell Spacing menjadi 2 Pixels.
Hasilnya akan seperti gambar di bawah ini.
Jika sudah sekarang fokus kursor mouse kita ke kolom pertama baris pertama tabel, lalu tambahkan elemen Image dengan nama Kantong Belanja.png. Dan untuk kolom kedua ketikkan teks Keranjang Belanja. Hasilnya seperti gambar di bawah ini.
Kemudian pada baris keempat kita gabungkan kolom menggunakan perintah Merge Cell, lalu masukkan image dengan nama Menu Kanan Best Seller.jpg. Hasilnya akan terlihat seperti gambar di bawah ini.
Lengkapi untuk image menu dan beri teks pada menu informasi dan pembayaran sehingga akan terlihat seperti gambar di bawah ini.
Membuat Menu Search
Selanjutnya kita akan membuat menu search atau pencarian. Untuk itu ikuti langkah-langkah di bawah ini.
Masih pada jendela dokumen index.php yang masih aktif, kali ini aktifkan kolom pertama dari baris pertama, lalu tambahkan elemen Div Tag.
Untuk class gunakan class css Area_Menu_Kiri.
Lalu blok Content for Class "Area_Menu_Kiri" Goes Here dan hapus.
Selanjutnya kita akan membuat menu search atau pencarian. Untuk itu ikuti langkah-langkah di bawah ini.
Masih pada jendela dokumen index.php yang masih aktif, kali ini aktifkan kolom pertama dari baris pertama, lalu tambahkan elemen Div Tag.
Untuk class gunakan class css Area_Menu_Kiri.
Lalu blok Content for Class "Area_Menu_Kiri" Goes Here dan hapus.
Kemudian di dalam area div tag tambahkan elemen Form, dan di dalam area form kita tambahkan Tabel dengan ketentuan seperti berikut ini.
Hasilnya akan seperti di bawah ini.
Jika sudah, tambahkan elemen Text Field dan beri nama ID : caritxt. Lihat gambar di bawah ini.
- Beri nilai Rows menjadi 1 dan Columns menjadi 2.
- Ubahlah Table width menjadi 100 percent.
- Ubah pula untuk Border Thickness menjadi 0 Pixels.
Hasilnya akan seperti di bawah ini.
Jika sudah, tambahkan elemen Text Field dan beri nama ID : caritxt. Lihat gambar di bawah ini.
Jika muncul tampilan seperti di bawah ini, klik Yes.
Sekarang fokus kursor mouse ke kolom kedua baris pertama.
Dan tambahkan elemen Rollover Image.
Pada kotak dialog Insert Rollover Image kita seperti gambar di bawah ini.
Hasilnya akan seperti di bawah ini.
Kita akan membuat tulisan bergerak. Klik di awal teks "Selamat datang di website ..." .
Lalu kita tambahkan kode <marquee scrollaount="3"> di awal teks "Selamat datang di website ..." dan </marquee> di akhir teks. Lihat gambar di bawah ini.
Lalu kita tambahkan kode <marquee scrollaount="3"> di awal teks "Selamat datang di website ..." dan </marquee> di akhir teks. Lihat gambar di bawah ini.
Membuat Footer
Sekarang kita masuk pada pembuat Footer website, footer ini digunakan untuk menampilkan informasi pembuatan website, tahun atau lain sebagainya. Untuk membuatnya kita ikuti langkah-langkah berikut ini.
Masih pada jendela dokumen index.php yang masih aktif, kali ini kita blok baris kelima tabel dasar pada posisi P1 ke posisi P2. Lihat gambar di bawah ini.
Kemudian kita gabungkan kolom dengan menggunakan perintah Merge Cell, lalu masukkan gambar dengan nama Footer.png.
Hasilnya akan terlihat seperti gambar di bawah ini.
Memberi Background
Selanjutnya kita akan membuat background gambar agar tampilan website terlihat lebih menarik. Untuk itu ikuti langkah-langkah berikut ini.
Pada jendela dokumen index.php yang masih aktif, fokus mouse di luar tabel, kemudian pada jendela Properties kilik tombol Page Properties atau tekan tombol Ctrl + J. Lihat gambar di bawah ini.
Pada kotak dialog Page Properties yang tampil kita klik tombol Browse untuk pilihan Background image.
Lalu masukkan gambar dengan nama Background.gif. Lihat gambar di bawah ini.
Jika sudah, sekarang kita klik kolom kedua baris keempat, lalu beri warna untuk Bg : #FFFFFF, atau warna putih. Lihat gambar di bawah ini.
Hasil setelah diberi backround gambar, website akan terlihat seperti gambar di bawah ini.
Melihat Layout Sementara pada Browser
Untuk melihat hasil sementara tampilan design website pada browser, caranya buka browser seperti Internet Explore, Microsoft Edge, Mozilla Firefox, Google Chrome, Opera atau lain sebagainya.
Pertama simpan dahulu project yang telah kita buat.
Pastikan server local Xampp pada control panel Xampp telah berjalan. Kurang lebih seperti terlihat pada gambar di bawah ini.
Selanjutnya kita buka browser. Di sini saya menggunakan browser Mozilla Firefox. Ketik alamat link pada address bar browser: http://localhost/tokobaju/ lalu tekan tombol Enter.
Hasilnya akan terlihat seperti gambar di bawah ini.
Sekarang kita masuk pada pembuat Footer website, footer ini digunakan untuk menampilkan informasi pembuatan website, tahun atau lain sebagainya. Untuk membuatnya kita ikuti langkah-langkah berikut ini.
Masih pada jendela dokumen index.php yang masih aktif, kali ini kita blok baris kelima tabel dasar pada posisi P1 ke posisi P2. Lihat gambar di bawah ini.
Kemudian kita gabungkan kolom dengan menggunakan perintah Merge Cell, lalu masukkan gambar dengan nama Footer.png.
Jika muncul seperti di bawah. Klik OK
Hasilnya akan terlihat seperti gambar di bawah ini.
Memberi Background
Selanjutnya kita akan membuat background gambar agar tampilan website terlihat lebih menarik. Untuk itu ikuti langkah-langkah berikut ini.
Pada jendela dokumen index.php yang masih aktif, fokus mouse di luar tabel, kemudian pada jendela Properties kilik tombol Page Properties atau tekan tombol Ctrl + J. Lihat gambar di bawah ini.
Pada kotak dialog Page Properties yang tampil kita klik tombol Browse untuk pilihan Background image.
Lalu masukkan gambar dengan nama Background.gif. Lihat gambar di bawah ini.
Jika sudah, sekarang kita klik kolom kedua baris keempat, lalu beri warna untuk Bg : #FFFFFF, atau warna putih. Lihat gambar di bawah ini.
Hasil setelah diberi backround gambar, website akan terlihat seperti gambar di bawah ini.
Melihat Layout Sementara pada Browser
Untuk melihat hasil sementara tampilan design website pada browser, caranya buka browser seperti Internet Explore, Microsoft Edge, Mozilla Firefox, Google Chrome, Opera atau lain sebagainya.
Pertama simpan dahulu project yang telah kita buat.
Pastikan server local Xampp pada control panel Xampp telah berjalan. Kurang lebih seperti terlihat pada gambar di bawah ini.
Selanjutnya kita buka browser. Di sini saya menggunakan browser Mozilla Firefox. Ketik alamat link pada address bar browser: http://localhost/tokobaju/ lalu tekan tombol Enter.
Hasilnya akan terlihat seperti gambar di bawah ini.
No comments:
Post a Comment