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

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

Video: Cara Membuat Menu Navigasi di Template Viomagz Terupdate Juli 2019 2025

Video: Cara Membuat Menu Navigasi di Template Viomagz Terupdate Juli 2019 2025
Anonim

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.

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

Pilihan Editor

Bagaimana Mengelola Komentar di WordPress Anda. com Blog - dummies

Bagaimana Mengelola Komentar di WordPress Anda. com Blog - dummies

Buka halaman Komentar dengan mengklik link Komentar di menu navigasi Dashboard WordPress. Halaman Komentar menunjukkan semua komentar di blog Anda sejak hari pertama Anda memulai. Di sini Anda bisa melihat komentar, mengeditnya, menandai mereka sebagai spam, atau flat-out menghapusnya. Jika Anda menetapkan pilihan Komentar Anda jadi ...

Bagaimana Mengelola Pengguna dan Penulis di Blog WordPress Anda - dummies

Bagaimana Mengelola Pengguna dan Penulis di Blog WordPress Anda - dummies

Pengguna WordPress halaman memberitahu Anda tentang semua pengguna di blog Anda. Ini mencantumkan nama pengguna, nama, alamat e-mail, peran di blog Anda, dan jumlah posting yang dibuat ke blog Anda. Untuk mengelola peran pengguna, Anda perlu memahami jenis akses yang diberikan masing-masing peran: Pengikut: Peran default ini ditugaskan untuk ...

Cara Membuat Permalinks WordPress Bekerja dengan Server Anda - dummies

Cara Membuat Permalinks WordPress Bekerja dengan Server Anda - dummies

Setelah Anda mengatur format untuk permalinks untuk situs WordPress Anda dengan menggunakan opsi selain default, WordPress menulis peraturan, atau arahan tertentu ke. htaccess file di server web anda Itu. htaccess file pada gilirannya mengkomunikasikan ke server web Anda bagaimana seharusnya menyajikan permalinks, sesuai dengan permalink ...

Pilihan Editor

Bagaimana cara Log In ke Layanan Cloud - dummies

Bagaimana cara Log In ke Layanan Cloud - dummies

Karena Cloud Service sepenuhnya berbasis di awan, semua Anda benar-benar Kebutuhan untuk mengaksesnya adalah koneksi internet. (Nah, Anda juga memerlukan nama pengguna dan kata sandi.) Anda dapat masuk dari kantor Anda dan kemudian mengambil tempat Anda tinggalkan di hotel saat bepergian di Tokyo. Salesforce memiliki banyak tindakan pengamanan ...

Bagaimana Bergerak di sekitar MYOB - dummies

Bagaimana Bergerak di sekitar MYOB - dummies

Di MYOB, Anda dapat melangkah maju dan mundur melalui setiap jendela pembelajaran saya. untuk mencintai kunci Tab komputer Anda. Ini jauh lebih mudah dan lebih cepat daripada menggunakan mouse anda. Keystrokes Shortcut Result Shift + Tab Bergerak ke belakang ke kolom sebelumnya Enter atau Tab Bergerak ke depan ke kolom berikutnya Alt + F4 Berhenti dan mengemas Esc Membawa ...

Bagaimana Membuka Kasus untuk Pelanggan di Salesforce. Kasus com - dummies

Bagaimana Membuka Kasus untuk Pelanggan di Salesforce. Kasus com - dummies

Adalah dasar Salesforce. com Layanan Cloud. Mereka adalah titik pusat kontak Anda dan apa yang agen hidup dan hirup setiap hari. Kasus adalah catatan penyelidikan layanan atau dukungan untuk pelanggan yang merinci masalah dan semua informasi yang mengelilinginya, seperti yang ditunjukkan. Kasus ...

Pilihan Editor

Menghitung Persen Tujuan di Excel - dummies

Menghitung Persen Tujuan di Excel - dummies

Ketika seseorang meminta Anda untuk menghitung satu persen Tujuannya, dia hanya mengatakan untuk membandingkan kinerja aktual dengan tujuan yang dinyatakan. Matematika yang terlibat dalam perhitungan ini sederhana: Bagilah tujuannya dengan aktual. Ini memberi Anda nilai persentase yang menunjukkan berapa banyak pencapaian yang telah dicapai. Misalnya, jika ...

Menghitung Persentase Varian di Excel - dummies

Menghitung Persentase Varian di Excel - dummies

Varians adalah indikator perbedaan antara satu angka dengan angka lainnya. Untuk memahami hal ini, bayangkan bahwa Anda menjual 120 widget pada suatu hari, dan keesokan harinya, Anda menjual 150. Perbedaan dalam penjualan sebenarnya sangat mudah dilihat; Anda menjual 30 widget lagi. Mengurangkan 120 widget dari 150 widget memberi ...

Menghitung Persentase Varian dengan Nilai Negatif di Excel - dummies

Menghitung Persentase Varian dengan Nilai Negatif di Excel - dummies

Rumus untuk menghitung varian persen dalam Excel bekerja dengan indah dalam banyak kasus. Namun, bila nilai benchmark adalah nilai negatif, rumusnya akan turun. Misalnya, bayangkan Anda memulai bisnis dan berharap bisa kehilangan tahun pertama. Jadi, Anda memberi anggaran sebesar negatif $ 10.000. Sekarang bayangkan itu ...