Profil Penulis

author photo

Imran Abdul Jabar: Pengasas Sifoo.com. Melibatkan diri di dalam bidang grafik/multimedia dari tahun 1998. Kini, bergiat secara aktif sebagai Trainer/Instructor untuk kursus-kursus grafik dan multimedia. Blog: http://imranabduljabar.com

Lihat semua pos oleh Imran

Ikon pada Senarai (List)

28 August 2008 | Pos Terkait | Dalam Kategori

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!

Popularity: 14% [?]

Jika anda baru di Sifoo.com, mungkin ada baiknya anda melanggani RSS Sifoo.com melalui email atau feed. Terima kasih kerana berkunjung!

Nota: Artikel atau tutorial ini hakmilik Sifoo.com. Aktiviti seperti meniru, menyalin, menciplak dan menerbitkan semula tanpa izin adalah ditegah sama sekali. Keizinan boleh diberikan sekiranya anda berminat dan berbincang dengan pihak Sifoo.com. Sila berikan kredit dan linkback kepada penulis asal dan laman web Sifoo.com.

Terdapat 9 Maklumbalas Setakat Ini. »

  1. Komen oleh mdrizad pada 7 November 2008:

    assalammualikum sifoo. selama ni saya guna blog templete wat blog.. bleh tak tunjuk ajar basic nak gunakan dreamweaver. saya nak tahu mcm mana nak taip skrip. thanks
    Jumlah komen oleh mdrizad: 1

  2. Komen oleh eza pada 15 January 2009:

    assalamualaikum,sifoo.Saya nk tanyalah,macam mn nk hilangkan pop up active content kat top website bila guna IE.Bila guna mozila ok.Sbb die mencacatkan menu button bila saya x allow benda tu.Terima kasih.
    Jumlah komen oleh eza: 4

  3. Komen oleh Imran pada 16 January 2009:

    eza> kalau nak deactivatekan pop-up blocker yang disallow active content daripada website. Klik kat menu Tools > Internet Options > Advanced Tab. Kemudian, cari kategori ‘Security’, dan aktifkan ‘Allow active content to run in files on My Computer’.

  4. Komen oleh mohd alias pada 12 September 2009:

    cara nak link satu2 butang dalam dreamweaver mcm mne???
    sy kne bt projek ttg bar kod pd kad matrik…
    Jumlah komen oleh mohd alias: 2

  5. Komen oleh Imran pada 13 September 2009:

    butang tu dalam bentuk image atau pakai form button?

  6. Komen oleh mohd alias pada 13 September 2009:

    cth cmni,.,,
    klu sy klik button menu utama dia mst kne kuar data ttg menu utama,,,
    ,,,sy ada 4 button,,,
    1 menu utama
    2 maklumat umum
    3 data pelajar
    4 data kakitangan
    ….
    –> cara nk run dreamweaver mx 2004 cmne???

    –> sy nak tau kod bg satu-satu link n dia kne gne internet ke nk run dreamweaver???

    –> klu sy nk klik kt mne2 button kne bt cmne????

    kalau blh sy nk tau la..
    tajuk projek final sy “barcode system for matrix card”

    oooooo—>>klu ada pe2 msg sy kt ym….
    mai_hunter@yahoo.com
    Jumlah komen oleh mohd alias: 2

  7. Komen oleh garo pada 16 November 2009:

    mcmana nak upload design yang kita buat kedalam blogspot
    Jumlah komen oleh garo: 1

  8. Komen oleh roslankasim pada 26 December 2009:

    Sifoo .. sejak dulu lagi saya hanya guna Micromedia Dreamweaver 8 (MD8)… pas tu apa beza dgn dreamweaver css tu …?
    pas tu saya cari software MD8 sudah nak dapat dah kat kedai2 … apa yang hampir sama dgn MD8 ni ..?
    Jumlah komen oleh roslankasim: 4

  9. Komen oleh roslankasim pada 26 December 2009:

    Adakah masih ada lagi kursus atau workshop utk buat website menggunakan software dreamweaver kat KL …maksima 3hari ?
    Jumlah komen oleh roslankasim: 4

Hantar MaklumBalas

*Sila dapatkan Gravatar anda di www.gravatar.com