Docstoc

membuat-menu-dengan-css

Document Sample
membuat-menu-dengan-css Powered By Docstoc
					              mwever 8 [M
     Seri Dream               T       ENGAN CS
                        MEMBUAT MENU DE      SS]


                         ri      al     weaver 8
                       Ser Tutoria Dreamw
                      MEMMBUAT MMENU DENGAN CS SS
Menu atau navig di sebua website m
     u          gasi        ah         memegang p            ng
                                                   peranan yan sangat peenting. Fungsi
utam            ah
    manya adala memuda      ahkan peng gunjung untuk menda   apatkan informasi yan   ng
                gan                    si           ,        ng
diinginkan. Deng menu atau navigas yang baik, pengunjun dapat de        engan muda   ah
berpiindah dari satu halaman ke halama yang lainn Sebaliknya, navigas yang buru
                            n          an          nya.                 si           uk
akan membingun   ngkan penguunjung, sehi           menyebabkan pengunjung “tersesat
                                        ingga bisa m                                  t”
dan jika pengun  njung tersebut tidak ddapat mene  emukan “jal          ”
                                                              lan pulang” kembali k  ke
halam awal, maka bisa dip
    man        m                        n
                           pastikan akan langsung m          an
                                                   meninggalka website kita (close).

                            ang
Banyak bentuk dan teknik ya dapat di             ntuk membu menu ata navigasi d
                                       igunakan un         uat         au         di
    man web. Beberapa d
halam                       diantaranya mengguna akan tabel, mengguna akan images,
mengggunakan ob             dan
               bject flash, d juga me enggunakan CSS. Masing                      ki
                                                            g‐masing teknik memilik
    bihan dan ke
keleb          ekurangan mmasing‐masinng.

Dalam tutorial ini akan dis
    m          i          sampaikan bagaimana membuat m            gasi) denga
                                                         menu (navig         an
meng          C
    ggunakan CSS. Salah s satu keuntu          u
                                     ungan menu menggunakan CSS a adalah dapaat
    mpilkan den
ditam          ngan cepat oleh brow            uga hampir semua bro
                                     wser dan ju                   owser dapaat
mena           a          ll‐browsers).
    ampilkannya (support‐al           .

    kut        ah‐langkah m
Berik ini langka                   enu     ngan Dreamw
                          membuat me CSS den         weaver 8.

                        dengan nam “menu.h
1. Buatlah halaman baru d        ma                                    di
                                         html” melalui menu File > New d
   D
   Dreamweave er.




                         d                      versitas Budi Luhur - Jak
                    Achmad Solichin, S.Kom | Univ           i           karta 1
              mwever 8 [M
     Seri Dream               T       ENGAN CS
                        MEMBUAT MENU DE      SS]

    elanjutnya simpan dulu halaman sebagai “menu
   Se            s                                            k
                                                  u.html”. Klik menu File > Save As…,
                 enyimpanan file dan ketikkan nama filenya.
   pilih lokasi pe

              uah         gan
2. Buatlah sebu div deng cara me               mbol “Insert div tag” yang berada d
                                    eng‐klik tom                                 di
   menu Layout. Berikan nama pada div tersebut de
   m                                v                     a
                                                engan nama “menu”.




                                                menggunaka unordered‐list (ul) da
3. Buatlah sebuah daftar menu (navigasi) dengan m        an                     an
   buatlah link untuk masing
                u                      t
                           g‐masing list menu.




                        d                      versitas Budi Luhur - Jak
                   Achmad Solichin, S.Kom | Univ           i           karta 2
         m
Seri Dreamwever 8 [M     T       ENGAN CS
                   MEMBUAT MENU DE      SS]




               d                      versitas Budi Luhur - Jakarta 3
          Achmad Solichin, S.Kom | Univ           i           k
              mwever 8 [M
     Seri Dream               T       ENGAN CS
                        MEMBUAT MENU DE      SS]


                                     div
4. Buatlah sebuah CSS Rule baru pada d menu.




                       d                      versitas Budi Luhur - Jakarta 4
                  Achmad Solichin, S.Kom | Univ           i           k
         m
Seri Dreamwever 8 [M     T       ENGAN CS
                   MEMBUAT MENU DE      SS]




               d                      versitas Budi Luhur - Jakarta 5
          Achmad Solichin, S.Kom | Univ           i           k
              mwever 8 [M
     Seri Dream               T       ENGAN CS
                        MEMBUAT MENU DE      SS]




5. Buatlah sebuah CSS Rule baru untuk tag ul




                        d                      versitas Budi Luhur - Jakarta 6
                   Achmad Solichin, S.Kom | Univ           i           k
         m
Seri Dreamwever 8 [M     T       ENGAN CS
                   MEMBUAT MENU DE      SS]




               d                      versitas Budi Luhur - Jakarta 7
          Achmad Solichin, S.Kom | Univ           i           k
              mwever 8 [M
     Seri Dream               T       ENGAN CS
                        MEMBUAT MENU DE      SS]




6. Buatlah sebuah CSS Rule baru untuk tag li




                        d                      versitas Budi Luhur - Jakarta 8
                   Achmad Solichin, S.Kom | Univ           i           k
         m
Seri Dreamwever 8 [M     T       ENGAN CS
                   MEMBUAT MENU DE      SS]




               d                      versitas Budi Luhur - Jakarta 9
          Achmad Solichin, S.Kom | Univ           i           k
              mwever 8 [M
     Seri Dream               T       ENGAN CS
                        MEMBUAT MENU DE      SS]




7. Buatlah sebuah CSS Rule baru untuk tag a




                        d                      versitas Budi Luhur - Jakarta 10
                   Achmad Solichin, S.Kom | Univ           i           k
         m
Seri Dreamwever 8 [M     T       ENGAN CS
                   MEMBUAT MENU DE      SS]




               d                      versitas Budi Luhur - Jakarta 11
          Achmad Solichin, S.Kom | Univ           i           k
         m
Seri Dreamwever 8 [M     T       ENGAN CS
                   MEMBUAT MENU DE      SS]




               d                      versitas Budi Luhur - Jakarta 12
          Achmad Solichin, S.Kom | Univ           i           k
              mwever 8 [M
     Seri Dream               T       ENGAN CS
                        MEMBUAT MENU DE      SS]




8. Buatlah sebuah CSS Rule baru untuk tag a:hover




                        d                      versitas Budi Luhur - Jakarta 13
                   Achmad Solichin, S.Kom | Univ           i           k
         m
Seri Dreamwever 8 [M     T       ENGAN CS
                   MEMBUAT MENU DE      SS]




               d                      versitas Budi Luhur - Jakarta 14
          Achmad Solichin, S.Kom | Univ           i           k
              mwever 8 [M
     Seri Dream               T       ENGAN CS
                        MEMBUAT MENU DE      SS]




9. Preview hasilnya di Brow
                          wser.




                        d                      versitas Budi Luhur - Jak
                   Achmad Solichin, S.Kom | Univ           i           karta 15

				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:43
posted:8/4/2011
language:Malay
pages:15