Scribd
Unggah
11K tayangan15 halaman

Seri Tutorial Dreamweaver 8 - Membuat Menu Dengan CSS (Free)

Tutorial membuat menu dengan CSS di Dreamweaver 8. Langkahnya meliputi pembuatan halaman baru, div untuk menu, daftar menu menggunakan unordered list, dan penambahan style CSS untuk elemen-elemen menu.

Diunggah oleh

Achmad Solichin
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
11K tayangan15 halaman

Seri Tutorial Dreamweaver 8 - Membuat Menu Dengan CSS (Free)

Tutorial membuat menu dengan CSS di Dreamweaver 8. Langkahnya meliputi pembuatan halaman baru, div untuk menu, daftar menu menggunakan unordered list, dan penambahan style CSS untuk elemen-elemen menu.

Diunggah oleh

Achmad Solichin
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 15

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

Anda mungkin juga menyukai