Cara Membuat Bar Navigasi dari Senarai Pautan Tidak Direka di Dreamweaver - dummies

Berikut adalah helah CSS yang hebat untuk mengubah senarai bullet ke bar navigasi di Dreamweaver dengan kesan peralihan yang mudah. Menggunakan senarai bullet untuk bar navigasi adalah konvensyen yang diterima baik untuk laman web yang memenuhi piawai kebolehaksesan semasa.

Kredit: Foto oleh istockphoto. com

Pautan yang sama masih terkandung dalam senarai tanpa urutan, tetapi penerapan gaya mengubah penampilan mereka secara dramatis.

Kredit: Foto oleh istockphoto. com

Untuk membuat bar navigasi menggunakan CSS untuk mentakrifkan semula senarai dan pautan pautan yang tidak disusun, ikuti langkah berikut:

1. Klik untuk meletakkan kursor anda di mana anda ingin membuat bar navigasi anda di halaman.

2. Masukkan teks yang anda ingin sediakan sebagai pautan, memisahkan setiap satu dengan menekan Return atau Enter key untuk membuat kembali perenggan.

   Untuk memformatkan pautan sebagai senarai yang tidak disusun, berasingan setiap baris teks yang anda mahu sambungkan dengan tag

3. Buat pautan dengan memilih setiap sekeping teks pada gilirannya, mengklik ikon Hiperpautan dalam panel Bersama Biasa, dan kemudian memilih halaman yang ingin anda pautkan atau memasukkan URL.

4. Seret untuk memilih keseluruhan set pautan, dan kemudian klik ikon Senarai Tidak Disusun dalam pemeriksa Hartanah.

   Titik peluru muncul pada permulaan setiap pautan. Sekiranya sebarang pautan tidak dimulakan dengan peluru berasingan, klik untuk memadam ruang di antaranya dan pautan sebelum itu, kemudian tekan Return atau Enter untuk memisahkan pautan dengan kembali perenggan.

   

5. Untuk menambah teg di sekeliling senarai pautan (atau mana-mana kandungan lain yang ada pada halaman), pilih kandungan dan kemudian klik ikon Div di panel Biasa.

   Kotak dialog Div ini akan dibuka.

   Menambah tag di sekitar senarai pautan yang tidak disusun adalah berguna jika anda ingin menambah pemformatan.

6. Pilih Wrap Seluruh Seleksi dari senarai juntai Sisipan.

   Untuk kawalan lebih tepat di mana anda menambah tag baharu, anda boleh memilih pilihan dari senarai juntai Sisipan di bahagian atas kotak dialog Sisipkan Div.

   

7. Masukkan nama dalam medan Kelas atau medan ID.

   Tanda dengan nama kelas atau ID yang anda masukkan akan ditambahkan secara automatik ke halaman yang mengelilingi senarai pautan.

8. Di bahagian bawah kotak dialog Sisipkan Div, klik butang CSS CSS Baru.

   Nama peraturan CSS yang baru ditambah pada senarai nama gaya dalam panel CSS Designer Selectors.

9. Dalam panel Properties, tentukan tetapan yang dikehendaki untuk warna, latar belakang, saiz, margin, dan padding.

   Pemformatan gaya diterapkan secara automatik kepada kandungan teg itu kerana anda menggunakan gaya yang anda buat dalam Langkah 5-7.

10. Untuk mencipta gaya kompaun yang akan memformat senarai tidak disusun hanya apabila ia digunakan dalam bar navigasi, buat gaya kompaun yang merangkumi nama kelas. navbar:

    1. Letakkan kursor anda di mana-mana dalam senarai bulleted.

    2. Klik tanda tambah (+) di bahagian atas panel Selectors.

    3. Dalam medan Nama Pemilih, pastikan Dreamweaver dimasukkan secara automatik. navbar ul sebagai nama gaya baru dalam panel Selectors.

    4. Dalam panel Properties, tetapkan margin dan padding ke 0.

11. Buat gaya kompaun untuk mentafsir semula tag item senarai:

    1. Letakkan kursor anda di mana-mana dalam senarai bulleted.

    2. Klik tanda tambah di bahagian atas panel Selectors.

    3. Dalam medan Nama Pemilih, pastikan Dreamweaver dimasukkan secara automatik. navbar ul li sebagai nama gaya baru dalam panel Selectors.

    4. Dalam panel Properties, tetapkan Paparan kepada Inline.

    5. Tukar Jenis Gaya Senarai kepada Tiada untuk mengeluarkan peluru.

    6. Tetapkan margin kiri dan kanan hingga 20 piksel.

       Langkah ini memisahkan item senarai dari satu sama lain dalam senarai mendatar. Anda boleh menukar tetapan untuk membuat jumlah ruang antara pautan yang sesuai dengan reka bentuk anda.

12. Buat gaya untuk mentakrifkan semula tag pautan:

    1. Klik untuk meletakkan kursor anda dalam pautan di navbar.

    2. Klik tanda tambah di bahagian atas panel Selectors.

    3. Jika anda mahu mengubah nama gaya, klik dua kali nama dalam panel Selectors dan masukkan nama yang anda mahu gunakan.

    4. Dalam bahagian Teks pada panel Properties, tetapkan Text-Decoration to None.

    5. Masih dalam bahagian Teks, pilih warna dari warna dengan baik untuk menentukan warna pautan apabila mereka dimuatkan pada halaman.

13. Buat gaya baru untuk mentafsir semula tag hover-link supaya warna pautan akan berubah apabila pengguna menggulung kursor ke atas pautan:

    1. Klik tanda tambah di bahagian atas panel Selectors.

    2. Dalam medan Nama Pemilih, masukkan. navbar a: hover.

    3. Dalam bahagian Teks pada panel Properties, tetapkan Text-Decoration to None.

    4. Masih dalam bahagian Teks, pilih warna dari warna dengan baik untuk menentukan warna pautan apabila pengguna melancarkan kursor mereka ke atas pautan.

14. Buat gaya baharu untuk mentafsir semula pautan pautan yang dikunjungi supaya perubahan warna pautan selepas pengguna mengklik pautan:

    1. Klik tanda tambah di bahagian atas panel Selectors.

    2. Dalam medan Nama Pemilih, masukkan. navbar a: dikunjungi.

    3. Dalam bahagian Teks pada panel Properties, tetapkan Text-Decoration to None.

    4. Masih dalam bahagian Teks, pilih warna dari warna dengan baik untuk menentukan warna pautan selepas ia telah dikunjungi.

15. Klik butang Live di bahagian atas ruang kerja atau klik butang Pratonton untuk melihat halaman dalam penyemak imbas untuk melihat kesan gaya pautan.