Ikon pada Senarai (List)

Senarai atau Bulleted List atau Numbered List adalah sesuatu yang biasa kita gunakan di dalam penulisan. Bagaimana kita boleh mencantikkan ’senarai’ kita dengan ikon selain daripada simbol bullet yang biasaKita boleh menghasilkan ’senarai’ ber’ikon’ ini dengan menggunakan CSS. Contohnya seperti ’senarai’ yang terdapat di dalam laman web Sifoo.com ini.

Senarai:

• Lihat bulletnya adalah imej ikon
• Lihat bulletnya adalah imej ikon
• Lihat bulletnya adalah imej ikon
• Lihat bulletnya adalah imej ikon

Berikut adalah koding CSS yang digunakan untuk menghasilkan ’senarai ber’ikon’:

.list {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
list-style-image: url(images/imej_bullet.png);
}

Selain daripada menaip CSS secara manual, Dreamweaver juga boleh digunakan untuk menghasilkan kod CSS di atas. Dengan menggunakan Dreaweaver, kita tidak perlu menaip kod CSS.

Caranya ialah dengan menggunakan CSS Panel.

Dalam Panel CSS (imej di atas), klik pada butang ‘New CSS Rules’
Satu window (imej di bawah) akan timbul. Segala setting untuk CSS akan dibuat di dalam window tersebut.

Untuk mendapatkan CSS untuk ’senarai’ ber’ikon’, pilih kategori List dan setkan Bullet Image kepada imej ikon yang kita inginkan.

Klik ok.

Kemudian, di dalam dokumen Dreamweaver, buatkan satu ’senarai’. Highlightkan ’senarai’ tersebut dan applykan CSS style yang telah dibuat tadi. Gunakan Panel Properties (yang berada di bahagian bawah Dreamweaver) untuk meletakkan CSS style kepada ’senarai’.

Selamat mencuba!