Membuat Template Halaman Web Sederhana II

Pada postingan kali ini saya akan melajutkan tutorial pembuatan template halaman web sederhana dimana pada postingan yang lalu kita sudah mempelajari pembuatan halaman awal atau layout utama yang nantinya akan menjadi halaman depan pada project website sederhana ini..dan untuk tutorial kali ini kita membutuhkan satu aplikasi lagi yaitu adobe Photoshop CS3, jika compi sobat belum terinstal aplikasi photoshop sobat bisa mendownloadnya disini, untuk sobat yang belum melihat artikel pertama sobat bisa melihatnya disini, tanpa basa basi lagi oke sobat berikut langkah-langkahnya :

1. Buka kembali halaman index.php kalian yang kurang lebih tampilannya seperti ini

2. header gambar merupakan tempat dimana kita menyisipkan gambar, menu atas area untuk tempat penyisipan menu, kiri untuk menu kiri kanan untuk menu kanan sedangkan pada bagian tengah merupakan konten atau isi dari halaman website dan untuk area footer kita bisa menyisipkan alamat atau pembuat desain dari template tersebut.
3. Sekarang buka aplikasi photoshop sobat buat halaman baru dengan ukuran pixel 790 x 120 → Klik OK seperti yang terlihat pada gambar:

4. Buat layer baru klik layer→New → layer maka akan tampil gambar seperti gambar dibawah ini klik OK :

5. Pada Toolbar sebelah kiri pilih Rectangle Tool → style button color black → pilih style sesuai dengan keinginan sobat

6. Tarik Rectangle Tool pada layer 1 dan sisakan sebagian maka hasilnya akan terlihat seperti ini :

7. Pada area layer sebelah kanan pilih shape 1 kemudian klik kanan klik Rasterize Layer seperti gambar berikut :

8. Pilih Eraser Tool pada toolbar sebelah kiri bentuk gambar sehingga menjadi seperti ini:

9. Tambahkah layer baru dengan cara seperti pada poin 2 kemudian pilih Horizontal Type Tool pada toolbar sebelah kiri tuliskan nama sesuai dengan keinginan sobat karena disini saya akan membuat website komunitas maka pada header gambar akan terlihat seperti gambar dibawah ini:

10. Tambahkan Logo pada pada sebelah kanan tulisan lalu simpan pada folder Xampp → htdocs → Tutorial → images dengan format gif sehingga hasil akhirnya akan seperti berikut :

Oke sekarang sobat telah memiliki gambar header, nah sekarang bagaimana cara menyisipkan gambar pada file index.php yang telah kita buat pada tutorial sebelumnya..santai dulu sobat jika sobat perokok bakar dulu paru-paru hahaha *just kidding* → kembali ke laptop simak baik-baik pertanyaannya wai.. sudah kayak mas tukul aza ni..tanpa basa-basi-basong lagi berikut langkahnya :

1. Buka aplikasi dreamweaver sobat klik index.php yang telah kita buat pada tutorial sebelumnya pada area kerja klik split dan tampilannya kurang lebih seperti berikut:

2. Kemudian pada area kerja code hapus tulisan “header gambar” dan ketikan kode berikut sehingga tampilan index.php seperti gambar dibawah ini:

3. Nah sekarang hasil akhirnya ketika dijalankan pada browser tampilannya kurang lebih seperti ini :

Penjelasan kode :
Img = gambar
Src = search atau cari gambar
Images = merupakan folder tempat penyimpanan gambar pada project web yang sobat buat
Header.gif = merupakan gambar header yang telah kita buat
Width = ukuran lembar gambar
Height = ukuran tinggi gambar


Nah selesai sudah tutorial kita kali ini tunggu postingan berikutnya pada seri tutorial desain template web sederhana part 3… selamat mencoba semoga bermamfaat


[[ salam aulia syani ]]