Cara Membuat Menu Navigasi Dengan CSS Dreamweaver

Diskripsi :

Cyber Blog - hai sobat , kali ini saya akan share sebuah tutorial , nah pada kesempatan kali ini saya akan share tutorial membuat menu navigasi di dreamweaver dengan css lebih tepatnya tutorial membuat menunavigasi dengan css :D

"Klik Gambar Untuk Memperbesar"

1. Pertama buka dreamweaver → HTML

2. Setelah itu anda klik tabel
anda bisa isi dengan kreasi anda sendiri atau bisa ikuti seperti saya ini :
Rows : 1
Colums : 5
Table Width : 200 (pixel) → isi terserah anda, soalnya nanti kita otak atik lagi
Broder thickness : 0
Cell padding : 0
Cell Spacing : 0

klik OK

3. Setelah langkah 2 selesai , anda bisa isi colum sesuai keinginan anda , Contoh : Menu | Game | Software | Anime | Game (Seperti Di Gambar)

Terus anda klik kanan → New pada menu css di kanan (lihat gambar)

4. Setelah itu anda bisa isi Name dengan nama terserah yang penting jangan pake space → Define in klik This Document Only → OK (Bisa Lihat Gambar)

5. Pada Menu Type anda bisa isi dengan kreasi anda atau bisa isi seperti saya :
Font : Times New Roman , Times , Serif
Size : 6
Color : Putih (#FFFFFF)

6. Selanjutnya anda bisa Ke Menu Background , anda bisa isi dengan kreasi anda , tapi anda bisa isi seperti punya saya :

Background Color : #333333 (Hampir Mendekati Hitam Pekat)

7. Pada bagian block anda bisa isi sesuka anda sendiri , atau bisa isi seperti pengaturan saya :

Text align : Center

Display : Block

8. Setelah langkah 7 selesai , anda bisa ke menu border anda bisa pilih :

Style : Solid

Width : Thin

Color : Putih (#FFFFFF)

Klik Apply dan OK

9. Setelah itu anda klik "Split" antara Code dan Design , anda cari script dari colum yang tadi anda tulis di table → dan klik di belakang <td . (Lihat Gambar)

10. Setelah itu anda klik Style → cari nama css yang anda buat tadi.

11. Setelah langkah 10 selesai anda coba lihat di colum yang ada buat tadi , kalau colum tersebut berubah warna atau ber efek berarti sudah "berhasil".

12, Anda ulangi langkah 10 ke semua colum.

13 Bila langkah di atas udah selesai semua , selanjutnya kita klik kanan pada css yang kita buat tadi di menu css → Duplicate.

14. Setelah anda klik Duplicate , langsung klik OK saja.

15. Setelah anda duplicate , anda klik css yang pertama anda buat..dan klik lagi (jeda 1 detik) sampai nama css tersebut bisa di ganti , setelah bisa di ganti anda bisa tambahkan "space" a. (Lihat Gambar)

16. Ulangi langkah 15 pada css yang anda duplicate tadi , tapi anda tambahkan "space" a:hover (Lihat gambar).

17. Setelah langkah di atas selesai , anda bisa lihat efek css pada colum tabel yang anda buat tadi menghilang. (efek cssnya)

18. Setalah itu anda klik css yang anda Duplicate tadi dan klik edit.

19. Anda ke menu background dan ubah setting backgroundnya :
Background color : mendekati putih (#CCCCCC) atau ganti dengan yang lain (tetapi jangan sama seperti warna css yang pertama).

20. setelah itu anda ke bagian colum tabel → block tulisan yang ada di dalam colum tersebut dan isi urlnya anda bisa kasih link anda atau # .

21. Maka efek css akan muncul.

22. Anda isi semua tulisan colum dengan link.

23. Bila langkah di atas sudah selesai , anda sekarang akan menghilangkan garis bawah yang ada di bawah tulisan (yang ada di dalam colum) . Anda cukup ke Modify → Page Propertis → Links → Uderline Style : Never underline