CHAPTER 2MEMBUAT DESIGN WEB

I. TARGET WEB YANG AKAN DIBUAT

Gambar 3.1Target Tampilan yang akan di buat

II. LANGKAH-LANGKAH PEMBUATAN DESIGN WEB Setelah terinstalasi web server seperti pada point ke II maka selanjutnya

kita akan membuat web design sesuai dengan contoh yang ada pada point ke III. Baiklah berikut adalah langkah-langkahnya :

IV.1. Membuat Folder Tempat Penyimpanan Web Design- Setelah aktif web server - Buat folder dengan nama webku pada directory C:/xampp/htdocs/- Klik Sebelah kanan mouse pada menu Start- Pilih Open Windows Explorer- Klik C:/xampp/htdocs/- Klik sebelah kanan mouse pada folder c:/xampp/htdocs/- Seperti terlihat pada gambar dibawah ini :

Gambar 4.1Membuat Folder Webku

- Selanjutnya berinama folder tersebut dengan nama webku- Maka sudah terbentuk C:/xampp/htdocs/webku/ - Selanjutnya copy folder gambar ke dalam folder C:/xampp/htdocs/webku/ yang sudah kami sediakan.- Maka hasilnya akan terbentuk seperti folder berikut ini C:/xampp/htdocs/webku/gambar/

IV.2. Mengaktifkan Dreamweaver CS4- Aktifkan Dreamweaver CS4- Klik Start - Klik All Programs- Klik Adobe Dreamweaver CS4- Klik File- Klik New- Klik PHP pada kolom Page Type- Klik pada kolom Layout- Lalu Klik Create- Ketik Webku pada kolom Title- Terlihat seperti gambar dibawah ini :

Gambar 4.2Worksheet Dreamweaver CS4

IV.3. Membuat Site- Aktifkan Dreamweaver CS4- Klik Site- Klik New Site- Ketik webku pada kolom What would you like to name your site- ketik http//localhost/webku/ pada kolom what is the HTTP Address (URL) of your site- Klik Next- Pilih Yes, I want to use a server technology- Pilih PHP MySQL pada kolom which server technology- Klik Next- Pilih Edit and test locally- Ketik atau Browse C:/xampp/htdocs/webku/- Klik Next- Ketik http://localhost/webku/ pada kolom What URL would you use to browse to the of your site- Klik Next- Pilih Yes, I want to use a remote server- Klik Next- Pilih Local/Network pada kolom How do you connect to your remote server- Ketik atau browse C:/xampp/htdocs/webku/gambar/ pada kolol What folder on your server do you want to store your files in- Klik Next- Pilih No, do not enable check ini and check out- Klik Next

- Klik Done

IV.4. Membuat Table Untuk layout Web DesignSetelah membuat site maka selanjutnya akan merancangmembuat layout untuk web dengan menggunakan tableperintahnya adalah sebagai berikut :- Pada worksheet Dreamweaver CS4- Klik Insert- Klik Table- Isi Row dengan 4 pada menu table- Isi Coloumns dengan 1 pada menu table- Isi Table width dengan 795 pixel pada menu table- Isi Border thickness dengan 1 pixel pada menu table- Isi Cell Padding dengan 0 pada menu table- Dan Isi Cell Spacing dengan 0 pada menu table Terlihat seperti gambar dibawah ini :

Gambar 4.3Menu Table Untuk Layout Web

- Lalu Klik OK- Ketengahkan table diatas dengan Pilih Center pada kolom Align- Simpan kursor pada baris ke 3 kolom ke 1

- Isi kolom H dengan 350 pada menu HTML- Simpan File dengan Klik File- Klik Save- Beri nama dengan index.php pada kolom filename pada menu Save As- Klik Save

IV.5. Memasukkan Gambar Header ke dalam tableSetelah terbentuk table seperti diatas maka selanjutnya akan memasukkan gambar header dan button, langkah-langkahnya adalah sebagai berikut :- Simpan kursor pada baris ke 1 kolom ke 1- Klik Insert- Klik Image- Cari nama file fatcow.JPEG- Pada folder C:/xampp/htdocs/webku/gambar/- Klik OK- Klik OK- Rubah kolom W menjadi 795 pada menu PROPERTIES dan- Kolom H menjadi 175 pada menu PROPERTIES- Lalu Tekan Enter- Klik File- Klik Save- Aktifkan Mozila Firefox- Ketik localhost/webku/ pada kolom Address Maka hasilnya akan tampak seperti berikut ini :

Gambar 4.4Hasil Tampilan Setelah memasukkan Gambar Header

IV.6. Memasukkan Gambar Header ke dalam tableSetelah memasukkan gambar header pada web, maka selanjutnya

adalah memasukkan gambar button kedalam web, maka langkah-langkahnya adalah sebagai berikut :- Aktifkan file index.php- Simpan kursor pada baris ke 2 kolom ke 1- Klik Insert- Klik Image Objects- Klik Rollover Image- Klik Browse pada kolom Original image Cari file tombol_01.gif- Klik OK- Klik Browse pada kolom Rollover image Cari file but1b.jpg- Klik OK pada menu Insert Rollover imageMaka hasilnya akan tampak seperti berikut ini :

Gambar 4.5Hasil Tampilan Setelah memasukan gambar Button

- Lakukan seperti perintah diatas untuk menampilkan button selanjutnya hingga tombol_08dan hasilnya hingga seperti berikut ini :

Gambar 4.6Tampilan Akhir Web