Gunakan Dreamweaver untuk mengedit tag halaman web dengan cepat
Penulis：Eve Cole
Waktu Pembaruan：2009-06-01 01:02:43
Saya ingin tahu apakah Anda memiliki kebiasaan menulis kode dengan tangan. Misalnya: Jika Anda ingin memasukkan sepotong kode CSS atau sepotong kode Javascript ke dalam sel, bagaimana cara melakukannya dengan cepat dan nyaman?
Meskipun Dreamweaver telah memberi kita tampilan kode, kita masih harus menemukannya secara manual dan beralih bolak-balik. Meskipun Anda juga dapat menggunakan tampilan kode dan tampilan pengeditan secara bersamaan, ini akan memakan separuh ruang layar, membuat area pengeditan yang sudah kecil menjadi lebih ramai. Apakah ada cara yang lebih baik? Jawabannya adalah ya.
Mari kita ambil Dreamweaver 8 sebagai contoh, dengan asumsi bahwa tata letak panel Dreamweaver setiap orang adalah tata letak default. Periksa apakah ada deretan label kecil di atas panel properti. (Jika Anda tidak menggunakan MX, tagnya ada di status bar) Misalnya: jika Anda membuat dokumen HTML kosong baru, tag kecil di atasnya harusnya <body>. Silakan lihat gambar di bawah ini:
Tempat yang ditandai dengan bingkai merah pada gambar adalah protagonis kita saat ini. Mari kita lihat "membungkus tag" terlebih dahulu. Ketik beberapa kata pada halaman, pilih kata tersebut, pilih "Bungkus Tag" di menu klik kanan, masukkan "<strong>" (tidak termasuk tanda kutip) di kotak dialog pop-up Bungkus Tag, lalu tekan Enter. Apakah teks yang dipilih sebelumnya telah dibuat tebal? Buka kode sumber dan lihat. Apakah teks yang dipilih dikelilingi oleh tag <strong>? Anda dapat mencoba menambahkan beberapa tag lainnya, seperti: <a>, <p>. Anda juga dapat memasukkan atribut secara langsung di sini. Misalnya: <p style="warna:#CC0000">. Berikut ini hanya penjelasan umum. Jika Anda memiliki pertanyaan, silakan periksa bantuan Dreamweaver.
Mari kita bahas tentang cara menerapkan pemilih tag.
Saat kita memindahkan kursor ke teks tebal tadi, kita akan menemukan ada tambahan <strong> setelah <body>. Artinya terdapat tag <strong> di luar teks tempat kursor berada, dan tag <body> di luar tag <strong>. Selanjutnya, mari tambahkan tabel lain, gerakkan kursor ke dalam tabel, dan lihat struktur tagnya. Saya yakin teman-teman yang memiliki pengetahuan dasar tentang HTML seharusnya dapat memahaminya dengan mudah.
Misalkan sekarang kita ingin menyisipkan tabel dan menggunakan CSS untuk memindahkan tabel ke bawah 10 piksel. Pertama masukkan tabel, lalu pindahkan kursor ke dalam tabel. Saat ini, Anda akan melihat kata <body><table><tr><td> pada pemilih tag. Kemudian klik kanan label tabel dan Anda akan melihat empat opsi. Hapus tag, edit tag, setel kelas, dan setel ID.
Hapus tag: hapus tag. (Ada beberapa tag khusus yang tidak dapat dihapus. Misalnya: <table>, <tr>, <td>, <body>...)
Edit tag: lampirkan atribut ke tag, ubah atribut, dll.
Setel kelas: Lampirkan kelas ke tag ini. (yaitu kategori CSS)
Set ID: Lampirkan ID ke tag ini. (yaitu ID CSS)
Di sini, kita memilih untuk mengedit tag, dan kemudian menambahkan atribut style="margin-top:10px" di akhir, yang sama dengan cara penulisan kode sumber biasa. Lalu tekan enter. Pengeditan selesai. Jika Anda tidak dapat melihat efeknya di Dreamweaver, silakan gunakan browser untuk melihat pratinjaunya.
Ada cara lain yang mungkin Anda sukai. Pilih Jendela → Pemeriksa Tag. Saat Anda memilih tag, semua atribut dari tag yang dipilih saat ini akan ditampilkan di sini. Anda juga dapat mengedit dengan cepat di sini. Atribut yang dimasukkan di sini tidak perlu menyertakan tanda kutip. Tekan Enter setelah mengedit untuk konfirmasi.
Di sini kami hanya memberi tahu Anda caranya dan berharap semua orang dapat mengambil manfaat darinya.
