Anda Tidak Harus Menggunakan Hanya WYSIWYG
Dreamweaver adalah editor WYSIWYG yang hebat, tetapi jika Anda tidak tertarik untuk menulis halaman web di lingkungan "apa yang Anda lihat adalah apa yang Anda dapatkan", Anda masih dapat menggunakan Dreamweaver karena itu juga editor teks yang hebat. Tapi ada banyak fitur yang tergelincir di pinggir jalan dalam editor kode Dreamweaver karena fokus utamanya adalah pada "tampilan desain" atau bagian editor WYSIWYG dari produk.
Bagaimana Cara Mendapatkan Tampilan Kode Dreamweaver
Jika Anda belum pernah menggunakan Dreamweaver sebagai editor HTML sebelum Anda mungkin tidak pernah memperhatikan tiga tombol di bagian atas halaman: "Kode," "Split," dan "Desain." Dreamweaver dijalankan secara default di "Tampilan desain" atau mode WYSIWYG. Tetapi mudah untuk beralih melihat dan mengedit kode HTML. Cukup klik tombol "Kode". Atau, masuk ke menu Lihat dan pilih "Kode."
Jika Anda baru belajar menulis HTML atau Anda ingin mengetahui bagaimana perubahan Anda akan berdampak pada dokumen Anda, Anda dapat membuka tampilan kode dan tampilan desain pada saat yang bersamaan. Keindahan dari metode ini adalah Anda dapat mengedit di kedua jendela juga. Jadi Anda dapat menulis kode untuk tag gambar Anda dalam HTML dan kemudian menggunakan tampilan desain untuk memindahkannya ke lokasi lain di halaman dengan seret dan lepas.
Untuk melihat keduanya sekaligus, baik:
- Klik pada tombol "Split" (antara "Kode" dan "Desain")
- Di menu Tampilan, pilih "Kode dan Desain"
Setelah Anda merasa nyaman menggunakan Dreamweaver untuk mengedit kode HTML Anda, Anda dapat mengubah preferensi Anda untuk membuka Dreamweaver dalam tampilan kode secara default. Cara termudah adalah menyimpan tampilan kode sebagai ruang kerja. Dreamweaver akan terbuka di ruang kerja terakhir yang Anda gunakan. Jika tidak, cukup buka menu Window, dan pilih ruang kerja yang Anda inginkan.
Opsi Tampilan Kode
Dreamweaver sangat fleksibel karena memiliki banyak cara untuk menyesuaikannya dan membuatnya berfungsi seperti yang Anda inginkan. Di jendela opsi, ada kode mewarnai, pemformatan kode, petunjuk kode, dan opsi penulisan ulang kode yang dapat Anda sesuaikan. Tetapi Anda juga dapat mengubah beberapa opsi khusus dalam tampilan kode itu sendiri.
Setelah Anda berada dalam tampilan kode, ada tombol "Lihat Opsi" di bilah alat. Anda juga dapat melihat opsi dengan masuk ke menu Tampilan dan memilih "Opsi Tampilan Kode." Pilihannya adalah:
- Word Wrap - membungkus kode HTML sehingga Anda dapat melihatnya tanpa menggulir secara horizontal. Perhatikan bahwa opsi ini tidak memasukkan carriage return dalam kode Anda, ini hanya menampilkan kode agar lebih mudah dibaca.
- Nomor Baris - menampilkan nomor baris di sepanjang sisi kode. Ini menunjukkan simbol garis membungkus untuk garis yang membungkus lebih lama dari jendela tampilan.
- Karakter Tersembunyi - menampilkan karakter khusus alih-alih spasi yang akan ditampilkan pada halaman web. Seperti titik menggantikan ruang, chevron ganda menggantikan setiap tab, dan tanda paragraf atau paragraf menggantikan setiap baris.
- Sorot Invalid Code - menyoroti HTML yang salah dalam warna kuning. Jika Anda memilih tag kuning, Inspektur Properti akan memberi Anda petunjuk tentang cara memperbaikinya.
- Syntax Coloring - menghidupkan atau mematikan kode warna dari kode Anda. Anda mengubah warna kode warna Anda di bagian mewarnai kode preferensi.
- Auto Indent - membuat kode Anda indentasi otomatis setelah carriage return jika kode di atasnya menjorok. Anda dapat mengubah ukuran indentasi dengan mengubah ukuran tab di bagian pemformatan kode preferensi.
Mengedit Kode HTML dalam Tampilan Kode Dreamweaver
Sangat mudah untuk mengedit kode HTML dalam tampilan kode Dreamweaver. Cukup mulai mengetikkan HTML Anda. Tapi Dreamweaver menyediakan Anda dengan beberapa tambahan yang memperpanjangnya di luar editor HTML dasar. Ketika Anda mulai menulis sebuah tag HTML, Anda mengetik <. Jika Anda berhenti sebentar setelah karakter itu, Dreamweaver akan menunjukkan daftar tag HTML . Ini disebut petunjuk kode. Untuk mempersempit pilihan, mulailah mengetik huruf - Dreamweaver akan mempersempit daftar drop-down ke tag yang sesuai dengan yang Anda ketikkan.
Jika Anda baru mengenal HTML, Anda dapat menggulir daftar tag HTML dan memilih berbagai untuk melihat apa yang mereka lakukan. Dreamweaver akan terus meminta Anda untuk atribut setelah Anda mengetikkan tag. Misalnya, jika Anda mengetik ".
Tetapi petunjuk kode tidak berakhir pada tag. Anda dapat menggunakan petunjuk kode untuk memasukkan:
Jika petunjuk kode tidak muncul, Anda dapat menekan Ctrl-spasi (Windows) atau Cmd-spacebar (Macintosh) untuk membuatnya ditampilkan. Alasan paling umum mengapa petunjuk kode mungkin tidak muncul adalah jika Anda beralih ke jendela lain sebelum menyelesaikan tag Anda. Karena Dreamweaver mengetikkan pengetikan karakter <, jika Anda meninggalkan jendela dan kembali, Anda harus meluncurkan kembali petunjuk kode.
Anda dapat mematikan menu petunjuk kode dengan menekan tombol escape.
Setelah Anda mengetikkan tag HTML pembuka Anda, Anda harus menutupnya. Dreamweaver melakukan ini dengan cara alami. Jika Anda mengetikkan opsi "Tutup Tag yang paling sesuai dengan kebutuhan Anda.
Jika Anda tidak cukup siap untuk beralih ke mengedit halaman Anda dalam HTML tetapi Anda ingin menonton kode seperti yang tertulis, Anda harus mencoba kode inspektur. Ini membuka kode HTML di jendela terpisah. Ia bekerja seperti tampilan kode, dan, pada kenyataannya, pada dasarnya adalah jendela tampilan kode yang dapat dilepas untuk dokumen saat ini. Untuk membuka inspektur kode, buka menu Window dan pilih "Code Inspector" atau tekan tombol F10 pada keyboard Anda.
Dreamweaver akan memformat kode HTML namun Anda ingin itu ditampilkan. Misalnya, jika Anda menggunakan 3 spasi untuk membuat indentasi, tetapi tidak pernah menggunakan tag IMG indent, Anda dapat menentukan bahwa informasi format dalam opsi penulisan ulang kode. Kemudian Anda pergi ke menu Perintah dan pilih "Terapkan Pemformatan Sumber." Ini adalah cara yang bagus untuk mendapatkan kode yang ditulis oleh orang lain ke dalam format yang akrab bagi Anda.
Fitur yang tidak diketahui banyak pembuat kode HTML atau tidak digunakan adalah kemampuan untuk menciutkan kode HTML. Ini tidak menghapus tag dari dokumen, tetapi hanya menghapusnya dari tampilan sehingga mereka tidak mengganggu apa yang sedang Anda kerjakan. Untuk menciutkan kode Anda:
- Pilih bagian kode yang ingin Anda sembunyikan
- Di menu Edit, pilih "Tutup Pilihan" dari sub-menu "Runtuh Kode"
Cara yang lebih mudah adalah memilih kode dan kemudian klik pada ikon runtuhnya kode yang muncul di selokan. Anda juga dapat mengklik kanan pada kode yang dipilih dan pilih "Tutup Seleksi".
Jika Anda ingin menyembunyikan semuanya kecuali yang disorot, pilih "Perkecil Seleksi Luar" dalam salah satu metode di atas.
Untuk memperluas kode yang diciutkan, cukup klik dua kali di atasnya. Ini membuka kode dan memilihnya. Kemudian Anda dapat memindahkan pilihan itu atau menghapusnya atau menambahkan tag tambahan di sekitarnya.
Anda dapat menggunakan keruntuhan dan memperluas fitur sepanjang waktu pada halaman di mana Anda tidak ingin mengedit template eksternal. Anda tinggal memilih area konten yang ingin Anda edit dan tutup di luar. Kemudian tuliskan HTML Anda. Anda masih dapat melihat halaman dalam tampilan Desain atau mempratinjaunya di browser. Kode yang diciutkan tidak dihapus dari dokumen, cukup disembunyikan dari tampilan. Anda juga dapat menggunakannya saat Anda sedang mengerjakan serangkaian item. Setelah selesai, ambillah. Anda tahu Anda selesai ketika tidak ada kode yang ditampilkan.