10 Hacks tentang Dreamweaver – Editor Kode Terbaik untuk Pengembang Web

Dreamweaver adalah ibu dari semua aktivitas berbasis web di internet. Bagi sebagian besar orang, Dreamweaver hanyalah alat untuk membuat situs web, tetapi hanya para profesional yang tahu bahwa Dreamweaver adalah pembangkit tenaga listrik.

Dreamweaver memiliki banyak fitur dan opsi yang menjadikannya alat paling favorit para pengembang web. Tidak diragukan lagi perangkat lunak ini memiliki IDE (Integrated Development Environment) paling terkenal yang tidak dimiliki oleh perangkat lunak pengembangan web lainnya di pasar saat ini. Baik alat pengembangan, kolaborasi, dan pengkodean, Dreamweaver menyediakan jangkauan yang layak untuk dimainkan oleh para pengembang web. Itulah sebabnya bagi para pengembang web pemula, penting untuk mengetahui bagaimana mereka dapat memaksimalkan penggunaan Dreamweaver.

Semua aspek yang membedakan pengembang web ahli dan pengembang web biasa tersembunyi di bawah lapisan menu intuitif yang disesalkan, itulah sebabnya pengembang web baru kesulitan meningkatkan keterampilan mereka. Namun, dalam artikel ini, saya akan menunjukkan kepada Anda fungsi-fungsi tersembunyi dan kuat dari Dreamweaver yang sangat penting untuk diketahui untuk memenuhi permintaan pasar saat ini. Artikel ini akan membantu Anda mengakses fungsi-fungsi tersebut dengan cepat dan akan memberi Anda sepuluh peretasan bermanfaat teratas yang akan meningkatkan kualitas pekerjaan Anda dan meningkatkan pengkodean Anda secara signifikan.

1. Tampilan Dinamis dan Tampilan Langsung:

Semua orang tahu bahwa Dreamweaver menawarkan tampilan statis atau file terbuka kami. Namun, pertanyaannya tetap tidak terjawab pada tampilan dinamis aplikasi seperti WordPress. Untuk mengatur tampilan dinamis, kita perlu memberi tahu Dreamweaver tentang pengaturan yang akan digunakan untuk tampilan dinamis. Untuk mengatur ini, buka Pengaturan Permintaan HTTP dengan mengklik menu tampilan > Live View > opsi dan kemudian masukkan GET atau POST yang diperlukan untuk melihat aplikasi Anda dengan benar.

Setelah itu, alihkan Live View di Dreamweaver yang akan menggantikan panel Design View menjadi WebKit yang dirender langsung dengan piksel sempurna dari halaman Anda. Kemudian lengkapi dengan Javascript langsung, manipulasi DOM, kueri basis data, kode sisi server, dan CSS yang dirender, alih-alih ikon placeholder dari antarmuka Design View.

2. Bootstrap untuk meningkatkan navigasi:

Navigasi adalah komponen satu halaman di situs web responsif yang harus memiliki kemampuan adaptif untuk memenuhi kebutuhan layar yang lebih kecil yang dapat banyak dibantu oleh Bootstrap. Bootstrap memungkinkan Anda mengatur bilah navigasi dengan mudah dan beralih dari strip horizontal ke panel vertikal. Alasan dibaliknya adalah bahwa Dreamweaver mendukung semua fleksibilitas navigasi Bootstrap dan fitur ini mudah digunakan ketika mengembangkan situs web yang efektif dan responsif.

Untuk memberi Anda tampilan singkatnya, berikut ini adalah demo singkat tentang cara menggunakan Bootstrap dalam pengembangan Anda.

Meningkatkan navigasi dengan Bootstrap dimulai dengan dialog dokumen baru Dreamweaver. Cukup klik tombol Bootstrap Framework di dialog dokumen baru dan juga centang kotak opsi tata letak pra-bangun untuk menggunakan opsi navigasi berfitur lengkap seperti;

• Daftar tautan standar, tidak berurutan, dan benar secara semantik.
• Area penempatan logo untuk menempatkan brand image.
• Siap mengaktifkan tombol kirim dan kolom pencarian.
• Preset untuk menu drop-down untuk item sub-navigasi dan lengkapi dengan pembagi.
• Bagian kiri dan kanan yang dapat disejajarkan bila diperlukan.
• Responsif bawaan.

Jika Anda merasa sulit, ada pilihan lain. Dreamweaver memungkinkan Anda untuk membuat bilah navigasi yang disesuaikan. Jika Anda lebih suka palet gelap, cukup tambahkan kelas .navbar-inverse ke tag <nav> Anda. Anda bahkan bisa bermain dengannya juga. Jika Anda ingin menampilkan navigasi Anda selalu di atas halaman, ketik .navbar-fixe-top. Jika Anda ingin menampilkannya di bawah, ketik .navbar-fixed-bottom. Semua kelas Bootstrap ini adalah standar, dan petunjuk kode Dreamweaver juga mendukung pengkodean ini, jadi Anda tidak perlu mengingat seluruh pengkodean. Anda hanya perlu mengetik .navbar di tampilan elemen, dan Anda akan mendapatkan daftar popup di mana Anda dapat memilih opsi yang Anda inginkan.

3. Membekukan JavaScript:

Ajax memiliki sifat yang sangat dinamis. Inilah sebabnya mengapa sering kali kita perlu berinteraksi dengan halaman dengan item yang tidak tersedia atau tidak dirender pada pemuatan halaman pertama. Item-item itu bisa disuntikkan ke halaman setelah beberapa saat dimuat, itulah sebabnya ia tidak muncul pada pemuatan pertama. Misalnya, ketika Anda mungkin ingin mengubah gaya tip alat yang diterapkan sepenuhnya pada JavaScript, Anda biasa mencari cara Anda secara metodis melalui skrip Anda untuk menemukan item mana yang dibuat di mana. Alih-alih mencari melalui skrip, coba yang berikut ini.

Letakkan Dreamweaver Anda di Live View dan render halaman Anda. Kemudian tekan F6 untuk membekukan JavaScript kapan saja yang memungkinkan Anda membedah dan menargetkan kode apa pun dari item dinamis apa pun di halaman. Ini tidak hanya akan membantu Anda dalam menargetkan kode yang tepat dari item dinamis tetapi juga akan mempercepat pengembangan Anda dengan mengurangi waktu dalam mencari kode apa pun dalam situs web dinamis.

4. Sorot kode:

Sebuah skrip pengkodean bisa sangat membingungkan jika Anda tidak terbiasa melihat pengkodean yang rumit setiap hari dan malam. Di sinilah penyorotan kode membantu Anda membuat pemisahan di seluruh skrip. Alih-alih menggerakkan mata Anda dengan tepi berdarah, Dreamweaver memiliki fitur yang menyoroti pengkodean yang membantu Anda membacanya. Untuk ini, buka preferensi Dreamweaver dan aktifkan bagian pratinjau teknologi. Kemudian klik opsi aktifkan penyorotan kode dan biarkan Dreamweaver melakukan tugasnya. Namun, Anda mungkin perlu memperbarui versi Dreamweaver Anda karena fitur ini hanya tersedia di versi terbaru.

Setelah Anda mengaktifkan opsi penyorotan, cukup klik dua kali pada tag apa pun, dan itu akan menyorot semua contoh tag pada halaman saat ini. Namun, parameternya harus ditentukan. Alat ini sangat bagus untuk mengidentifikasi dan membuka elemen serupa dengan cepat. Setelah Anda menyorot elemen apa pun, gunakan pintasan keyboard f3 di PC, CMD-G di Mac) untuk melompat dari satu elemen yang disorot ke elemen berikutnya. Juga, pengubah shift dapat mundur ke bagian sebelumnya. Selain itu, penyorotan kode juga berfungsi dengan atribut dan nilai tag HTML sehingga Anda dapat dengan mudah melihat kelas tertentu.

5. Penyelesaian JavaScript Otomatis:

Dreamweaver adalah platform hebat di mana kode HTML dan CSS yang cerdas dan lengkap. Padahal, beberapa orang percaya bahwa JavaScript tidak lengkap. Dalam kasus jQuery atau Prototype, di Dreamweaver, Anda harus tahu bahwa ada ekstensi API yang menyediakan kode penyelesaian Javascript. Kode-kode ini mempercepat proses pengembangan karena dengan menggunakan kode-kode ini tidak perlu mengetikkan seluruh skrip dan sangat berguna untuk pembuat kode cepat.

Dreamweaver adalah satu-satunya perangkat lunak pengembangan web yang memungkinkan Anda untuk menggunakan jenis kode penyelesaian jQuery dan Prototipe yang membantu setiap pengembang web untuk mempercepat tugas mereka dan menghasilkan produk terbaik dengan upaya minimal.

6. Akses File Terkait Dengan Mudah:

CSS dan JavaScript adalah nama file independen yang Anda lihat saat membuka file HTML dan PHP. Saat membuka file PHP, Anda dapat melihatnya di bagian atas jendela. Karena semua opsi ini ditempatkan di depan, Anda dapat dengan mudah beralih ke file-file ini dan dapat membuat perubahan yang dapat disimpan bahkan tanpa membukanya. Saat mengklik file apa pun di bilah file terkait, yang akan menunjukkan kepada Anda sumbernya di Tampilan Kode dan halaman induk di Tampilan Desain.

Selain itu, Anda juga dapat menggunakan alat navigator kode apa pun untuk mengakses kode sumber CSS dengan cepat yang akan memengaruhi solusi Anda saat ini. Akses cepat ke kode sumber CSS ini mengurangi waktu pengkodean dan memungkinkan pengembang web untuk fokus pada berbagai aspek proses pengembangan mereka.

7. Mempercantik kode dengan cepat:

Baris kode yang tidak teratur dan berantakan menunjukkan bahwa pengembang pengkodean ini tidak cukup profesional dan terampil untuk menulis kode secara berurutan. Ini juga merupakan sesuatu yang sangat penting dalam optimasi mesin pencari situs web. Namun, mengatur kode Anda dan mempercantiknya tidak sesulit yang diyakini orang. Dengan pengetahuan yang benar tentang pilihan Dreamweaver dan Anda dapat mengatur kode Anda dengan cepat. Cukup gunakan opsi "Terapkan pemformatan sumber" dan ubah sesuai keinginan Anda. Untuk membuat pengkodean Anda bersih dan rapi, klik "Format kode sumber" di bagian bawah bilah alat pengkodean dan kemudian pergi ke "edit> toolbar> pengkodean" dan kemudian pilih "pengaturan format kode" untuk mengatur pengaturan pilihan Anda.

Cara lain untuk mengatur skrip Anda adalah dengan mengakses opsi pemformatan dari Perintah > Terapkan Pemformatan Sumber atau terapkan hanya pada blok pengkodean dengan memilih opsi Terapkan Pemformatan Sumber ke Pilihan.

8. Pengodean Bebas Serat:

Tidak peduli seberapa banyak Adobe melengkapi Dreamweaver dengan alat dan fitur canggih, semakin banyak Anda bekerja di situs web, semakin banyak pekerjaan yang harus Anda lakukan di sisi pengkodean. Hal ini dapat meningkatkan keterampilan Anda, tetapi juga akan membuka pintu kesalahan yang tak ada habisnya karena terlalu banyak menulis coding bukanlah pekerjaan yang mudah untuk dilakukan. Dreamweaver mengetahuinya, maka dari itu pada Dreamweaver versi terbaru yaitu Creative Cloud (CC) terdapat fitur yang bernama Linting support. Linting adalah alat pemeriksa sintaks pemrograman dasar yang tersedia untuk CSS, HTML, dan JavaScript. Melalui ini, setiap kali Dreamweaver mengidentifikasi masalah atau kesalahan, ia mengirimkan sejumlah suar baik umum maupun khusus.

Untuk menjalankan tes, buka halaman penuh kode di Dreamweaver, dan Anda akan melihat tanda centang hijau kecil dalam lingkaran di sisi kanan bilah status. Jika hanya ada tanda centang hijau kecil yang dilingkari maka semuanya baik-baik saja dengan kode Anda. Jika ada tanda palang merah yang dilingkari merah, maka ada beberapa masalah dengan pengkodean Anda, dan Anda perlu merevisinya untuk menjalankan situs web Anda dengan benar. Selain itu, dengan mengklik tanda kesalahan, itu dapat membawa Anda ke kolom dan baris tempat Anda melakukan kesalahan dengan deskripsi kesalahan. Hal terbaik tentang itu adalah tidak ada batasan fitur ini dan Anda dapat menggunakannya sampai Anda tidak mendapatkan tanda hijau.

9. Memeriksa kompatibilitas browser:

Kemampuan browsing adalah salah satu hal yang paling mendasar dari setiap proses pengembangan web. Inilah sebabnya mengapa Dreamweaver membuatnya lebih mudah bagi Anda sehingga Anda tidak akan pernah melewatkan hal-hal dasar ini sebelum memulai pengembangan web Anda. Buka dokumen di Dreamweaver yang ingin Anda periksa kompatibilitasnya. Dari bilah menu tempat ikon kode, opsi tampilan split dan desain ditempatkan, ada opsi lain yang disebut tombol "Periksa Halaman".

Saat mengklik, itu akan membuka menu tarik-turun, pilih periksa kompatibilitas browser di dalamnya dan lihat hasil kompatibilitas Anda di jendela terpisah.

10. Minimalkan Kode:

Saat mengkode untuk situs web besar, sering terjadi bahwa sepotong kode mulai mengganggu Anda di layar. Sangat sedikit orang yang tahu bahwa mereka dapat meminimalkan potongan pengkodean ini hanya dengan menekan satu tombol dari keyboard. Ketika Anda yakin bahwa tidak perlu melakukan perubahan apa pun dalam potongan pengkodean, pilih saja blok itu dan klik "-" di sebelah nomor baris kode. Potongan itu akan meminimalkan dan tidak akan mengganggu Anda sampai Anda memperluasnya.