Jika dalam modul1 kita telah
belajar cara untuk membuat rancangan website menggunakan software photoshop,
maka selanjutnya kita akan belajar cara untuk membuat link pada menu-menu dari website
tersebut.
Ikutilah langkah-langkah berikut
:
1. Buka file .psd yang telah dibuat sebelumnya
 |
| 0.1 |
2. Setelah dibuka, saat nya kita menyeleksi
bagian yang ingin diberi link dengan menggunakan slice tool
 |
| 0.2 |
3. Setelah slice
tool diaktifkan, maka seleksi bagian menu satu per satu dengan cara menekan
mouse sambil di ditarik dibagian yang ingin diberi link
 |
| 0.3 |
4. Perhatikan menu-menu yang diberi link :
1. Link
menuju ke website pribadi 6. Link menuju resume.html
2. Link
menuju home.html 7.
Link menuju work.html
3. Link
menuju resume.html 8. Link menuju skill.html
4. Link
menuju product.html 9. Link menuju alamat facebook pribadi
5. Link
menuju contact.html 10. Link
menuju alamat twitter pribadi
 |
| 0.4 |
5. Jika sudah, maka file disimpan lagi dengan
cara klik file – save for web and
devices
 |
| 0.5 |
6. Saat muncul tampilan seperti ini, klik save
 |
| 0.6 |
7. Karena kita akan memperbaharui file .html
sebelumnya, maka saat muncul jendela penyimpanan, klik dulu pada file yang
telah kita buat sebelumnya
 |
| 0.7 |
8. Dan pastikan pada bagian save as type terpilih HTML
and Images (*.html), kemudian klik save
 |
| 0.8 |
9. Jika muncul pemberitahuan seperti ini, klik replace (menggantikan) karena kita
ingin mengganti file sebelumnya
 |
| 0.9 |
10. Selanjutnya
buka software Adobe Dreamweaver, untuk
tahap berikutnya. Setelah dibuka akan muncul tampilan seperti berikut :
 |
| 1.0 |
11. Karena kita sudah mempunyai file .html yang dibuat
di photoshop, maka pada bagian open a
recent item klik open dan cari
file yang dibuat sebelumnya pada folder dan klik open
 |
1.1
|
12. Setelah
terbuka maka tampilannya akan membesar seperti ini
 |
| 1.2 |
13. Jika
tampilan tidak seperti gambar diatas, coba pilih menu design pada bagian toolbar
 |
| 1.3 |
14. Untuk
memudahkan, kecilkan gambar dengan menekan ctrl
+ - secara bersamaan sehingga tampilannya mengecil
 |
| 1.4 |
15. Agar
pada browser tampilan website tampak berada ditengah, caranya blok gambar
website, lalu pada bagian properties pilih align
= center
 |
| 1.5 |
16. Setelah
itu gambar akan menggeser ketengah, namun pada gambar dibawah ini hanya
menggeser ke kanan sedikit karena tampilan kita kecilkan
 |
| 1.6 |
17. Setelah
itu, mulai memberikan link pada menu-menu yang sudah dibuat tadi dengan
meng-klik pada bagian yang kita seleksi sebelumnya
 |
| 1.7 |
18. Lalu
pada bagian properties di kolom link, tulis
alamat website yang dituju. Ini bertujuan agar ketika di klik maka halaman akan
berganti ke alamat link yang dituju
 |
| 1.8 |
19. Lakukan
hal yang sama untuk menu berikutnya
 |
| 1.9 |
20. Setelah
semua menu selesai diberi link, maka simpan file dengan cara file – save seperti gambar dibawah ini,
atau langsung menekan ctrl + s secara
bersamaan
 |
| 2.0 |
21. Setelah
disimpan, lihat kembali website pada browser dan tampilannya akan menengah
seperti gambar dibawah ini, dan apabila kursor di arahkan pada salah satu menu
maka akan tampak perubahan pada kursor yang berarti telah memiliki link yang
dapat di klik
 |
| 2.1 |
22. Apabila
menu resume atau menu-menu lainnya
di klik, maka tampilannya akan seperti dibawah ini. Pada bagian kotak url,
alamat sudah benar ditujukan ke resume.html,
namun halaman tidak ada. Ini disebabkan kita belum membuat halaman baru untuk
menjadi halaman resume.html, skill.html, dan lainnya. Nah sekarang, lakukan hal
yang sama seperti membuat tampilan dasar di photoshop. Selamat mencoba :)
 |
| 2.2 |
