Membuat Template Web

Sebelum kita masuk ke pembahasan disini kita harus pahami tentang template yang akan kita buat...
Sofware yang dibutuhkan Photoshop + Dreamwever... Photoshop digunakan untuk merancang tampilan web yang akan di buat sedangankan dreamwever di gunakan untuk mengedit coding HTML maupun PHP dan MYSQL

Pertaman tama yang harus kita siapkan adalah rancangan web yang sudah kita buat dengan Photoshop seperti pada gambar ini

Langkah 1:
Dengan Slice tool potong tiap bagian tombol buat garis potongan sesuai keinginan kita.. misal potong bagian header, tombol dll seperti gambar ini

Langka 2:
Setelah semua selesai di slice selajutnya pilih Menu => File => Save for Web lalu
Pilih Save => pilih lokasi menyimpan => buat Folder Baru => Save pada folder baru tersebut beri nama index.html

Langkah 3:
Buka file yang disimpan tadi dengan Dreamwever seperti gambar ini

Langkah 4:
Pilih File => Save As sebanyak 3x (disesuaikan banyaknya tombol ) untuk membuat Link tiap tombol..
dalam contoh ini beri nama home.html,contac.html dam ilmukita.html
Klik Tombol home maka pada coding yang berwarna biru seperti ini

<td>

< img src="images/index_02.gif" width="214" height="64" alt=""></a></td>

lalu buat link nya => klik Properties

Pada options Link => klik lambang folder => pilih file yang akan ditampilkan pada link ( sesuaikan dengan nama tombol, dalam hal ini di contohkan tombol home maka file yang di pilih home.html ) => OK

maka jika berhasil coding yang berwarna biru tadi akan berubah menjadi seperti ini
<td>

<a href="home.html"><img src="images/index_02.gif" width="214" height="64" alt=""></a></td>

dalam kondisi seperti ini untuk link pada tombol sebenarnya dah jadi.
Kita bisa memodivikasi link tambol tadi dengan menambahkan target="_blank" agar setiap kita klik tombol tersebut maka link tersebut akan muncul pada tab baru/ new tab.
untuk tombol yang lain silahkan lanjutkan seperti langkah yang tadi sampai selesai...

Moga artikel ini dapat menambah ilmu baru bagi anda.. Selamat Mencoba

Posted in: Photoshop