Membuat Navigasi Web

Membuat Navigasi Web

Untuk membuat navigasi web, Anda dapat menggunakan tombol (button), menu bar dan pop-up menu.

Membuat Tombol Navigasi

Tombol navigasi akan diletakkan dibawah judul web. Untuk membuat tombol, Anda dapat menggunakan tombol yang disediakan oleh Fireworks CS4 akan membuatnya sendiri. Untuk memudahkan pekerjaan, dalam buku ini penulis menggunakan tombol yang disediakan dalam panel Common Library.

Langkah untuk membuat tombol navigasi adalah sebagai berikut :

1. Aktif dalam jendela dokumen file index.png.

2. Buka panel Common Library di sisi kanan lembar kerja Fireworks CS4.

3. Dobel klik folder Buttons untuk menampilkan contoh beberapa tombol yang telah siap untuk digunakan.

4. Pilih salah satu tombol, misalnya pilih Button_03. Klik tahan geser tombol tersebut dari panel Common Library ke dalam jendela dokumen di bawah judul web.

hal-132-common-library

5. Tombol yang Anda tambahkan akan otomatis diberi objek slice. Anda masih dapat mengedit kembali tombol tersebut untuk mendapatkan hasil yang sesuai.

6. Langkah pertama yang harus Anda lakukan adalah mengganti teks pada tombol. Sebagai contoh untuk tombol yang pertama, ganti teksnya menjadi Home.

7. Klik objek slice tombol untuk memilih tombol tersebut. Pada kotak Text dalam panel Properties, ganti teks Button menjadi Home, akhiri dengan menekan Enter.

8. Langkah selanjutnya adalah mengganti kejadian pada tombol, yaitu Up, Over, dan Down.

hal-133-home-button

Selain itu Anda juga dapat mengubah ukuran objek tombol, mengubah jenis font, ukuran, warna dan sebagainya.

9. Dobel klik objek tombol, sehingga akan berpindah tampilan ke area kerja Button.

hal-134-document-library

10. Pilih objek vektor berupa Rounded Rectangle, dengan menggunakan properti dalam panel Properties, ubah ukurannya menjadi : W= 120, H=30.

11. Ubah ukuran huruf teks Button menjadi 15.

12. Klik pada area kerja Button, kemudian pilih state Over dalam kotak State panel Properties.

13. Pilih teks Button dalam area kerja Button, ubah warna teksnya menjadi merah (#FF0000) dengan ukuran 15.

14. Pilih juga objek Rounded Rectangle di belakang teks Button, kemudian ubah ukurannya menjadi: W=120, H=30.

hal-134-membuat-tombol-1

15. Klik pada area kerja Button, kemudian pilih state Down dalam kotak State panel Properties.

16. Pilih teks Button dalam area kerja Button, ubah warna teksnya menjadi kuning (#FFFF00) dengan ukuran 15.

17. Klik ikon Page1 di atas area kerja Button untuk kembali ke jendela dokumen.

hal-134-membuat-tombol-1-2

18. Hasil pembuatan tombol yang telah Anda lakukan akan tersimpan di dalam Document Library.

19. Untuk membuat tombol-tombol yang lain, Anda cukup mengambilnya dari panel Document Library dan mengganti teksnya.

20. Sebagai contoh Anda akan membuat tombol ke-2 dengan teks About Us.

hal-135-button-ke-2

21. Klik tahan geser Button_33 dari panel Document Library ke dalam jendela dokumen. Letakkan tombol yang ke-2 di sebelah kanan tombol yang ke-1.

22. Pilih objek tombol dalam jendela dokumen, kemudian ganti teks Button dalam panel Properties menjadi About Us.

23. Lakukan langkah yang sama untuk membuat tombol-tombol berikutnya. Sebagai contoh buat tombol dengan teks New Release, Galen, Contact, dan Blog Kami.

24. Atur letak tombol-tombol tersebut berjajar dari kiri ke kanan.

hal-136-tombol-navigasi

25. Simpan kembali file desain Anda dengan menekan Ctrl+S.

Membuat Menu Bar

Pembuatan Menu Bar digunakan untuk menambah navigasi agar website Anda lebih menarik. Dalam buku ini penulis akan menggunakan Menu Bar sebagai pemicu Pop-up Menu.

Langkah untuk membuat Menu Bar adalah sebagai berikut :

1. Aktif dalam jendela dokumen file index.png.

2. Buka panel Common Library di sisi kanan lembar kerja Fireworks CS4.

3. Dobel klik folder Menu Bars untuk menampilkan contoh beberapa Menu Bar yang telah siap untuk digunakan.

4. Pilih salah satu jenis Menu Bar dan lihat contoh tampilannya di atas nama kotak Name.

5. Klik tahan geser salah satu menu ke dalam jendela dokumen, sebagai contoh pilih Menu_Bar_07. Perhatikan hasilnya seperti pada gambar di bawah ini:

hal-137-menu-bar-1-2

6. Dobel klik Menu Bar untuk mengedit teks, warna, dan format item menu bar. Sebagai contoh Anda ganti semua teks dalam masing-masing item menu.

7. Setelah Anda dobel klik Menu Bar tersebut, maka jendela dokumen akan berpindah ke area kerja Menu_Bars_07.

hal-138-menu-bar1

8. Untuk langkah pertama, ganti warna objek di belakang teks menjadi biru (#000066). Klik objek kotak atau Rectangle di belakang teks item menu yang pertama, kemudian gunakan properti Fill Color dalam panel Properties.

9. Lakukan langkah yang sama untuk mengganti warna objek di belakang teks item menu yang lain.

10. Langkah selanjutnya adalah mengganti teks pada masing-masing item menu. Dobel klik teks item menu yang pertama, kemudian ketikkan teksnya, sebagai contoh ketikkan teks Home.

11. Lakukan langkah yang sama untuk mengganti teks pada item menu yang lain, sebagai contoh ganti 3 item menu tersebut menjadi Event, News, dan Artikel.

hal-138-menu-bar2

12. Jika pengaturan properti item menu sudah selesai, klik ikon Page 1 untuk kembali ke jendela dokumen.

13. Agar Menu Bar dapat digunakan dalam sebuah website, tambahkan slice untuk menutup masing-masing item Menu Bar.

Membuat Pop-up Menu

Dengan menggunakan Pop-up Menu, navigasi web Anda akan semakin luas dan menarik.

Langkah untuk membuat Pop-up Menu adalah sebagai berikut :

1. Masih aktif di dalam jendela dokumen file index.png.

2. Dengan menggunakan tombol perintah Slice tool dalam panel Tools grup Web, buat slice untuk menutupi item menu News dalam Menu Bar yang telah Anda buat sebelumnya.

hal-139-pop-menu

Item menu News akan digunakan sebagai pemicu untuk menampilkan Pop-up Menu.

3. Klik kanan pada objek slice, kemudian pilih Add Pop-up Menu. Pada kotak dialog. Pop-up Menu Editor yang tampil, buatlah menu yang akan ditampilkan saat Anda klik menu News.

hal-140-menu-editor-pop-up hal-141-jendela-dokumen 4. Dobel klik setiap sel dan masukkan informasi pada bagian Text, Link, dan Target.

5. Klik tombol Add menu untuk menambahkan item menu. Sedangkan untuk menghapus item menu, pilih item menu yang ingin dihapus dan klik tombol Delete Menu.

6. Anda dapat membuat sub menu dari item menu yang telah Anda buat. Pilih item menu dalam tabulasi Content yang akan dijadikan sub menu, kemudian klik tombol Indent Menu .

Klik tombol Outdent Menu untuk mengembalikan sub menu menjadi item menu.

7. Sebagai contoh buatlah menu dengan hasil-seperti pada gambar berikut ini.

8. Klik tombol Next, maka akan menampilkan tabulasi Appearance untuk mengatur tampilan dasar menu. Lakukan pengaturan pada bagian Cells, Choose alignment.., Font, Size, Up state dan Down state.

9. Klik tombol Next, maka akan menampilkan tabulasi Advanced untuk pengaturan menu lebih lanjut. Tabulasi ini digunakan untuk mengatur tampil sel menu, misalnya: ukuran sel, border sel dan Iain-lain.

10. Klik tombol Next untuk menampilkan tabulasi Positions. Tabulasi ini digunakan untuk mengatur tampilan menu dan sub menu, pilih salah satu tampilan yang sesuai.

11. Klik Done untuk menutup Pop-up Menu Editor. Hasil menu dalam jendela dokumen terlihat seperti pada Gambar 10.11.

12. Lakukan langkah 2 sampai langkah 11 seperti uraian di atas untuk membuat Pop-up menu dari item Menu Bar Artikel.

13. Sebagai contoh, menu Artikel memiliki item menu : Office, Grafis, Pemrograman, dan Web.

14. Simpan kembali file index.png Anda dengan menekan Ctrl+S.

Share

0 Comments

Trackbacks/Pingbacks

  1. Membuat Navigasi Web | alchumaidah - [...] membuat navigasi web, Anda dapat menggunakan tombol (button), menu bar dan pop-up [...]

Submit a Comment

Desain Web, Membuat Website