Cara Membuat Bar Navigasi dari Daftar Tautan Terurut dalam Dreamweaver - dummies

Berikut adalah trik CSS yang hebat untuk mengubah daftar bullet menjadi panel navigasi di Dreamweaver dengan efek rollover sederhana. Menggunakan daftar bullet untuk panel navigasi adalah konvensi yang diterima dengan baik untuk situs web yang memenuhi standar aksesibilitas saat ini.

Kredit: Foto oleh istockphoto. com

Tautan yang sama masih terdapat dalam daftar unordered, namun penerapan gaya tersebut mengubah penampilan mereka secara dramatis.

Kredit: Foto oleh istockphoto. com

Untuk membuat panel navigasi menggunakan CSS untuk mendefinisikan ulang daftar dan tag tautan tak berurutan, ikuti langkah-langkah ini:

1. Klik untuk menempatkan kursor Anda di tempat yang Anda inginkan untuk membuat panel navigasi di halaman.

2. Masukkan teks yang ingin Anda gunakan sebagai link, pisahkan masing-masing dengan menekan tombol Return atau Enter untuk membuat paragraf kembali.

   Untuk memformat tautan sebagai daftar tak berurutan, pisahkan setiap baris teks yang ingin Anda tautkan dengan tag

3. Buat link dengan memilih setiap potongan teks pada gilirannya, klik ikon Hyperlink di panel Common Insert, lalu pilih halaman yang ingin Anda tautkan atau masukkan URL.

4. Seret untuk memilih keseluruhan rangkaian tautan, lalu klik ikon Daftar Unordered di inspektur Properti.

   Titik peluru muncul di awal setiap link. Jika ada tautan yang tidak dinyalakan dengan peluru terpisah, klik untuk menghapus spasi di antara keduanya dan kaitannya sebelum itu, lalu tekan Kembali atau Masuk untuk memisahkan tautan dengan pengembalian paragraf.

   

5. Untuk menambahkan tag di sekitar daftar tautan (atau konten lain yang sudah ada di halaman), pilih kontennya lalu klik ikon Div di panel Common Insert.

   Kotak dialog Insert Div akan terbuka.

   Menambahkan tag di sekitar daftar tautan tak berurutan sangat membantu jika Anda ingin menambahkan pemformatan.

6. Pilih Wrap Around Selection dari daftar drop-down Insert.

   Untuk kontrol yang lebih tepat terhadap tempat Anda menambahkan tag baru, Anda dapat memilih opsi dari daftar drop-down Insert di bagian atas kotak dialog Insert Div.

   

7. Masukkan nama di kolom Kelas atau kolom ID.

   Tag dengan kelas atau nama ID yang Anda masukkan ditambahkan secara otomatis ke halaman yang mengelilingi daftar tautan.

8. Di bagian bawah kotak dialog Insert Div, klik tombol New CSS Rule.

   Nama aturan CSS baru ditambahkan ke daftar nama gaya di panel Desainer CSS Designer.

9. Pada panel Properties, tentukan pengaturan yang Anda inginkan untuk warna, latar belakang, ukuran, margin, dan padding.

   Format gaya secara otomatis diterapkan ke konten tag karena Anda menerapkan gaya saat Anda membuatnya di Langkah 5-7.

10. Untuk membuat style majemuk yang akan memformat daftar unordered hanya jika digunakan di navigation bar, buatlah style majemuk yang menyertakan nama kelas. navbar:

    1. Tempatkan kursor Anda di manapun dalam daftar bullet.

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

    3. Di kolom Selector Name, pastikan Dreamweaver masuk secara otomatis. navbar ul sebagai nama style baru di panel Selectors.

    4. Di panel Properties, atur margin dan padding menjadi 0.

11. Buat gaya majemuk untuk mendefinisikan ulang tag item daftar:

    1. Tempatkan kursor Anda di manapun dalam daftar bullet.

    2. Klik tanda tambah di bagian atas panel Selectors.

    3. Di kolom Selector Name, pastikan Dreamweaver masuk secara otomatis. navbar ul li sebagai nama gaya baru di panel Selectors.

    4. Pada panel Properties, atur Display to Inline.

    5. Ubah Daftar Style Type to None untuk menghapus peluru.

    6. Atur margin kiri dan kanan menjadi 20 piksel.

       Langkah ini memisahkan daftar item satu sama lain dalam daftar horizontal. Anda dapat mengubah setelan untuk membuat jumlah ruang di antara tautan yang paling sesuai dengan desain Anda.

12. Buat gaya untuk mendefinisikan ulang tag tautan:

    1. Klik untuk menempatkan kursor Anda di dalam link di navbar.

    2. Klik tanda tambah di bagian atas panel Selectors.

    3. Jika Anda ingin mengubah nama gaya, klik dua kali nama di panel Selectors dan masukkan nama yang ingin Anda gunakan.

    4. Di bagian Teks pada panel Properties, atur Text-Decoration to None.

    5. Masih di bagian Teks, pilih warna dari warna dengan baik untuk menentukan warna tautan saat dimuat di halaman.

13. Buat gaya baru untuk mendefinisikan ulang tag hover-link sehingga warna tautan akan berubah saat pengguna menggulung kursor di atas tautan:

    1. Klik tanda tambah di bagian atas panel Selectors.

    2. Di kolom Selector Name, masukkan. navbar a: hover.

    3. Di bagian Teks pada panel Properties, atur Text-Decoration to None.

    4. Masih di bagian Teks, pilih warna dari warna dengan baik untuk menentukan warna tautan saat pengguna memutar kursor di atas tautan.

14. Buat gaya baru untuk mendefinisikan kembali tag tautan yang dikunjungi sehingga perubahan warna tautan setelah pengguna mengeklik tautan:

    1. Klik tanda tambah di bagian atas panel Selectors.

    2. Di kolom Selector Name, masukkan. navbar a: dikunjungi

    3. Di bagian Teks pada panel Properties, atur Text-Decoration to None.

    4. Masih di bagian Teks, pilih warna dari warna dengan baik untuk menentukan warna tautan setelah dikunjungi.

15. Klik tombol Live di bagian atas ruang kerja atau klik tombol Pratinjau untuk melihat halaman di browser untuk melihat efek dari gaya tautan.