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

Kantor 2011 untuk Mac: Membuat Tabel dengan Kotak Dialog atau Teks - dummies

Kantor 2011 untuk Mac: Membuat Tabel dengan Kotak Dialog atau Teks - dummies

Sementara ada cara baru untuk membuat tabel di Office 2011 untuk Mac, Anda masih bisa menggunakan teknik stand-by. Menu yang familiar masih bekerja di Office 2011 untuk Mac, dan inilah buktinya. Dialog meja semuanya masih ada di sana: Di Word, pilih Table → Insert → Table; Sebagai alternatif, pada tab Tabel Ribbon, di Tabel Pilihan ...

Kantor 2011 untuk Mac: Melepaskan Command Toolbar - dummies

Kantor 2011 untuk Mac: Melepaskan Command Toolbar - dummies

Apakah Anda menggunakan Office 2011 untuk Mac atau Produk Microsoft Office lainnya, toolbar Anda bisa sangat berantakan. Setiap kali Anda merasa perlu untuk men-tweak antarmuka aplikasi Microsoft Office, Anda perlu memanggil dialog Customize Toolbars and Menus. Ini adalah dialog super kuat di Word, Excel, dan PowerPoint yang memungkinkan Anda ...

Kantor 2011 untuk Mac: Berbagi Toolbar dan Menu - dummies

Kantor 2011 untuk Mac: Berbagi Toolbar dan Menu - dummies

Setelah Anda menyesuaikan Office 2011 Anda bilah alat dan antarmuka, Anda dapat berbagi penyesuaian dengan orang lain. Namun, pastikan bahwa Anda menasihati orang-orang yang telah Anda lakukan sebelum membagikan dokumen Anda dengannya; Jika tidak, mereka mungkin akan terkejut saat mereka membuka dokumen Anda dan melihat susunan toolbar atau menu yang berbeda dari pada apa ...

Pilihan Editor

Penting Office 2007 Commands - dummies

Penting Office 2007 Commands - dummies

Anda dapat membuat program Office 2007 lebih mudah jika Anda menggunakan pintasan sederhana ini. Perintah-perintah ini, seperti mengurungkan kesalahan dan memperbesar dan memperkecil akan membantu Anda menghemat waktu. Memasuki simbol: Untuk memasukkan simbol atau karakter asing yang tidak ada pada keyboard Anda, masuk ke tab Insert dan klik Symbol ...

Menyesuaikan Perintah Menu di Office 2003 - dummies

Menyesuaikan Perintah Menu di Office 2003 - dummies

Office 2003 menyediakan dua teknik untuk menyesuaikan menu dan perintah menu. Anda bisa memulai dari kotak dialog Rearrange Commands atau menggunakan metode drag-and-drop. Teruslah membaca. Menangani perintah menu di kotak dialog Rearrange Commands Teknik tombol Options Toolbar untuk menangani tombol toolbar bagus dan keren, tapi bagaimana jika Anda ingin ...

Pilihan Editor

Bagaimana memecahkan kesalahan logis dalam analisis argumen Pertanyaan GRE - dummies

Bagaimana memecahkan kesalahan logis dalam analisis argumen Pertanyaan GRE - dummies

Ketika Anda menjawab Argument Analysis Pertanyaan di GRE, argumen mungkin tampak logis dan adil di permukaan tapi sebenarnya keliru (keliru, cacat). Alasan melingkar, penalaran sebab-akibat yang keliru, dan generalisasi sweeping adalah tiga tanda argumen lemah. Dengan melihat beberapa kesalahan logis yang lebih umum, Anda dapat mengidentifikasi kelemahan dalam argumen dan ...

Pilihan ganda, Beberapa Jawaban tentang Tes Matematika GRE - Pertanyaan Praktik - dummies

Pilihan ganda, Beberapa Jawaban tentang Tes Matematika GRE - Pertanyaan Praktik - dummies

Meskipun pertanyaan matematika biasanya hanya memiliki satu jawaban yang benar, ini tidak selalu terjadi. Akibatnya, beberapa pertanyaan pilihan ganda pada tes GRE Math akan memberi Anda daftar jawaban dan meminta Anda untuk memilih lebih dari satu. Pertanyaan praktik berikut meminta Anda untuk menemukan nilai kemungkinan yang berbeda secara berurutan dan ...

Pilihan ganda, Beberapa Jawaban tentang Tes Verbal GRE - Pertanyaan Praktik - dummies

Pilihan ganda, Beberapa Jawaban tentang Tes Verbal GRE - Pertanyaan Praktik - dummies

Pada tes GRE Verbal, beberapa pertanyaan pilihan ganda akan memiliki lebih dari satu jawaban yang benar. Untuk pertanyaan ini, Anda akan diminta untuk melihat-lihat pilihan jawaban dan memilih semua yang menurut Anda benar. Dalam pertanyaan praktik berikut, Anda diminta untuk membaca bagian yang disertakan, dan kemudian ...