Seri Dream

mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

Serri Tutoriaal Dreamwweaver 8

MEMMBUAT MENU
M DENGAN CSSS
Menu u atau naviggasi di sebuaah website memegang
m p
peranan yanng sangat peenting. Fungsi
utammanya adalaah memudaahkan penggunjung untuk mendaapatkan informasi yan ng
diinginkan. Denggan menu atau navigassi yang baik,, pengunjun ng dapat deengan mudaah
berpiindah dari satu halaman n ke halamaan yang lainn
nya. Sebaliknya, navigassi yang buruuk
akan membingun ngkan pengu unjung, sehiingga bisa menyebabka
m n pengunjung “tersesatt”
dan jika pengun njung tersebut tidak dapat
d meneemukan “jallan pulang”” kembali ke k
halam
man awal, maka
m bisa dip
pastikan akann langsung meninggalka
m an website kita (close).

Banyak bentuk dan teknik yaang dapat diigunakan un

ntuk membuuat menu ataau navigasi di
d
halam
man web. Beberapa diantaranya
d menggunaakan tabel, menggunaakan images,
mengggunakan obbject flash, dan
d juga meenggunakan CSS. Masingg‐masing teknik memilikki
keleb
bihan dan ke
ekurangan masing‐masin
m ng.

Dalam
m tutorial ini
i akan dissampaikan bagaimana membuat menu m (naviggasi) dengaan
mengggunakan CSS.
C Salah satu
s keuntu
ungan menuu menggunakan CSS adalah
a dapaat
ditam
mpilkan denngan cepat oleh brow wser dan ju
uga hampir semua broowser dapaat
menaampilkannyaa (support‐alll‐browsers)..

Berikkut ini langkaah‐langkah membuat

m meenu CSS den
ngan Dreamw
weaver 8.

1. Buatlah halaman baru dengan

d nam
ma “menu.h
html” melalui menu File > New di
d
D
Dreamweave er.

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 1

 Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

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

2. Buatlah sebu
uah div denggan cara meeng‐klik tommbol “Insert div tag” yang berada di
d
m
menu Layout. Berikan nama pada divv tersebut deengan namaa “menu”.

3. Buatlah sebuah daftar menu (navigasi) dengan menggunaka

m an unordered‐list (ul) daan
buatlah link untuk
u masingg‐masing listt menu.

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 2

Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 3

 Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

4. Buatlah sebuah CSS Rule baru pada div

d menu.

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 4

Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 5

 Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

5. Buatlah sebuah CSS Rule baru untuk tag ul

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 6

Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 7

 Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

6. Buatlah sebuah CSS Rule baru untuk tag li

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 8

Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 9

 Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

7. Buatlah sebuah CSS Rule baru untuk tag a

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 10

Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 11

Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 12

 Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

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

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 13

Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 14

 Seri Dream
mwever 8 [M
MEMBUAT
T MENU DE
ENGAN CS
SS]

9. Preview hasilnya di Brow

wser.

Achmadd Solichin, S.Kom | Univversitas Budii Luhur - Jakkarta 15